JavaScript Toggle Visibility on Click

Click to reveal a new div

<div id="box1">abc</div>
        <div id="box2" style="display:none;">awklnnbc</div>
        <div id="box3" style="display:none;">wgweilwe</div>
        <div id="box4" style="display:none;">vwfweifu</div>
        <div id="box5" style="display:none;">xvwervwe</div>
        <div id="box6" style="display:none;">gwevw</div>

        <button>Show Another Div</button>

After clicking "show another div"... (repeat code here)

A new div will appear with each click.

I hope you understand the concept now.

Only box1 is visible at first, the rest are hidden. Each div has different content. If someone clicks "Show Another Div," a new div will be shown. Is this possible?

javascripthideshowshow-hide

Answer №1

Check out this helpful solution that might address your issue:

Answer №2

To dynamically insert a new div, you can simply append it to the existing content:

Here is the HTML structure:

<div class="wrapper">
    <div id="content">
    </div>
    <button id="addNewDiv">ADD ANOTHER DIV</button>
</div>

Below is the JavaScript code (assuming you are using jQuery):

$("#addNewDiv").on("click", function(e){
   $("#content").append("<div/>", {text: "placeholder text"});
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Post request in ExpressJS fails to redirect user after submission

My current project involves developing a web application using NodeJS and ExpressJS. One issue I am encountering is with the login functionality on my website. After filling out the login form, the user's credentials are sent via a post request to the ...

javascriptnode.jsexpressposthttp-redirect

The click detection on loaded 3DObjects using threejs raycast is not functioning properly

After loading a .obj file using the following code: var loader = new THREE.OBJMTLLoader(); loader.load( "../obj/machine.obj", '../obj/machine.mtl', this.loadObject); I attempt to detect a click on it with the following code: click: function( ...

javascriptthree.jsraycasting

What is the best way to organize an array both alphabetically and by the length of its elements?

Imagine I am working with an array like this: ['a', 'c', 'bb', 'aaa', 'bbb', 'aa']. My goal is to sort it in the following order: aaa, aa, a, bbb, bb, c. this.array= this.array.sort((n1, n2) => ...

javascriptarraystypescriptsorting

What are the steps to increase or decrease the quantity of a product?

Is there a way to adjust the quantity of products in the shopping cart? I would like to be able to increase and decrease the quantity, while also displaying the current value in a span tag. <a href="javascript:" id="minus2" onclick="decrementValue()" ...

javascriptphpajax

Angular - How child components can communicate with their parent components

I'm struggling to understand how to communicate between components and services. :( Even though I've read and tried a lot, some examples work but I still don't grasp why (?). My goal is to have one parent and two child components: dashboa ...

javascriptangulartypescript

Determine the output by applying a constant value to the input

I'm having an issue with a loop function. The goal of the code is to allow users to enter a quantity of goods they want to buy, and then JavaScript calculates a fixed value based on the chosen quantity, which should be printed out. This functionality ...

javascripthtmlcss

Verify if the keys are present within the object and also confirm if they contain a value

How can we verify keys and compare them to the data object? If one or more keys from the keys array do not exist in the object data, or if a key exists but its value is empty, null, or undefined, then return false; otherwise, return true. For example, if ...

javascripttypescript

Locate the database user based on any parameter provided in the request

I need to search for users in the database using any of three different fields. In Postman, I have set up the following paths: http://localhost:8082/api/users/617473029f80eda3643a7fdd http://localhost:8082/api/users/Michael http://localhost:8082/api/use ...

javascriptnode.jsdatabasemongodbexpress

Switch back emulation when moving away from page - using angular javascript

I have a unique scenario in my component.ts file on a specific page where I need to incorporate custom CSS for printing purposes: @Component({ selector: "dashboard", templateUrl: "./dashboard.component.html", styleUrls: ["./d ...

javascripthtmlcssangularencapsulation

``Toggling all classes in a click event instead of toggling the correct block

Within my collapsed/collapsible blocks, the first block is open while the second and third are closed. The opening and closing function works correctly, but I am struggling to figure out how to change the icons so that they update only for the relevant blo ...

javascriptjquery

How can I incorporate an input text field in a specific row of an ng-repeat table similar to the image provided?

I have a table created using ng-repeat and I am looking to add an input row for only one specific row, not all rows. How can this be done? This is my current HTML code, any suggestions on how I can achieve this? Thank you! ...

javascriptangularjs

AJAX: Bringing in new content to display beneath the triggering page

Here is the code for my main page: <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> div { width:100%; ...

javascriptjqueryhtmlcssajax

Encountering a "Connection Refused" error when attempting to test a React and Express application

Currently, I am developing an order system using React for the frontend (port 3000) and Express for the backend (port 3001). Everything functions perfectly when tested on the same MacBook that hosts the node project. However, when testing it on a differen ...

javascriptnode.jsreactjsexpressjsx

Guide to setting up jQuery Mobile with bower

For my project, I'm interested in utilizing jquery-mobile through bower. In order to do so, I need to execute npm install and grunt consecutively within the bower_components/jquery-mobile directory to access the minified .js and .css files. This pro ...

javascripthtmlnode.jsgruntjsbower

Firebase Issue in Next JS Authentication Flow: Unconfirmed Email Causes "auth/email-already-in-use" Error to Trigger

I have encountered a perplexing issue while setting up user registration with Firebase Authentication in my Next.js application. The problem arises when I try to register a new user with an unverified email address. Instead of following the correct flow to ...

javascriptfirebasenext.jsfirebase-authenticationemail-verification

The function initFoodModel is missing and causing issues as it tries to read properties of undefined, specifically attempting to read 'findAll'

myWishlist.js const { setupFoodModel } = require("../../model/FoodModel"); const { setupWishlistModel } = require("../../model/myWishlistModel"); const setupMyWishlistModel = async () =\> { try { const sequelizeConnection = awai ...

javascriptnode.jsexpress

Is it possible to create a Facebook reveal tab using either Javascript or .NET?

As a developer who jumped into Facebook development just before the recent changes, I am feeling lost when it comes to building apps now. I see many questions similar to mine about creating fan-gating features using Javascript only. Is there an up-to-date ...

javascriptasp.netfacebookfacebook-javascript-sdk

Update your MySQL database with ease by leveraging the power of AJAX through a dropdown menu

Can you provide guidance on updating a MySQL database using a dropdown menu and Ajax without reloading the entire webpage? I am facing issues with implementing the code, even after referring to various tutorials. Below is a snippet of my PHP script within ...

javascriptphpjquerymysqlajax

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

I have a grid of divs with dimensions of 960x960 pixels, each block is usually 56px x 56px in size. I want to adjust the size of the divs based on the changing number of rows and columns in the grid. Below is the jQuery code that I am using to dynamicall ...

javascriptjqueryhtmlcss

"Having trouble with Set-Cookie Response Header not setting the cookie? It could be due to

My webpage is located at: http://localhost:4201/login When a user clicks on login, it sends a request to: http://localhost:4201/api/login/authenticate This request is then proxied to: The response from the proxy contains a set-cookie header with the f ...

javascriptangularauthenticationcookiessetcookie