(Type a title for your page here)

JavaScript — How to show and hide div by a button click

To display or hide a by a click, you can add the onclick event listener to the element.

The onclick listener for the button will have a function that will change the display attribute of the from the default value (which is block ) to none .

For example, suppose you have an HTML element as follows:

The element above is created to hide or show the element on click.

You need to add the onclick event listener to the element like this:

When you click the element again, the display attribute will be set back to block , so the will be rendered back in the HTML page.
Since this solution is using JavaScript API native to the browser, you don’t need to install any JavaScript libraries like jQuery.
You can add the JavaScript code to your HTML tag using the tag as follows:
Feel free to use and modify the code above in your project.
 
I hope this tutorial has been useful for you. 👍
 
Learn JavaScript for Beginners 🔥
 
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
 
A practical and fun way to learn JavaScript and build an application using Node.js.
 
 
About
 
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.
 
Search
 
Type the keyword below and hit enter
 
Tags
 
Click to see all tutorials tagged with:
 
Источник
 
How TO - Toggle Hide and Show
 
Toggle between hiding and showing an element with JavaScript.
 
Читайте также:  Server css v34 сервера
Toggle (Hide/Show) an Element
 
Step 1) Add HTML:
 
Example
 
Step 2) Add JavaScript:
 
Example
 
function myFunction() <
var x = document.getElementById("myDIV"); 
if (x.style.display === "none") <
x.style.display = "block"; 
> else <
x.style.display = "none"; 
>
> 
Tip: For more information about Display and Visibility, read our CSS Display Tutorial.
 
 
 
COLOR PICKER
 
 
 
 
Report Error
 
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
 
Thank You For Helping Us!
 
Your message has been sent to W3Schools.
 
Top Tutorials
 
Top References
 
Top Examples
 
Get Certified
 
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
 
Источник
 
Showing & hiding div layers on button clicks
 
 
 We can control a layer by connecting it to buttons. We can display or hide the layer by clicking the buttons. To create and manage a layer we will use div tags.
 
Show Hide Layers
 
We will use one on page style sheet for our div tag by defining its layout properties. We will keep this style definition inside our head tags. For more details on Style property visit our CSS section. We will use one JavaScript function to manage the property of the div tag identified by its id. 
Demo of show Hide layer → 
Here is the code
 
    div function setVisibility(id, visibility)   
Message Box
   
 
Using image as button
 
In the above code we can use image as button to show and hide layers. This part is included in the above demo. Here is the code to add image in place of button.
 
Using one single button to show or hide the message layer
 
The above code will display two buttons one of showing the layer and other for hiding the layer. We can combine the functionality of these two buttons to one and keep one button which can be toggled to show or hide layer. The caption displayed over the button can be changed by using value property of the button id. We will change this data also and display the appropriate label to give the message.
 
document.getElementById('bt1').value = 'Hide Layer';
 
 // To hide the layer document.getElementById(id).style.display = 'none'; // To display the layer document.getElementById(id).style.display = 'inline'; 
 
     div     
 
Using single button and more than one layer ( boxes )
 
To manage more than one layer we can use the same function and pass two ids of the message layer to the function. Inside the function in place of managing one layer we will mange two layers. 
Inside the style declaration we will be using relative positioning as we will be displaying two layers. 
Demo of managing two boxes by single button → 
The code is here
 
         setVisibility('sub3','sub4');";> 




 
 
 
Two layers showing one at a time with button click
 
Instead of using common style for div layers , we will keep individual style property of the layers so it can be managed easily. Here we will keep one layer hidden and one visible at the time of page loading.
 
Читайте также:  Формы html телефоны проверка
Then Inside the if condition we will change the status of the layers and make one visible and one hidden. So on each click one layer will be visible at a time.
 
  
 
We will change the label or the value of the button accordingly. 
Demo of showing one layer at a time by single button → 
Changes in style property is here
 
Questions
 
 
How can I show or hide a layer using JavaScript?
 
What are the different methods to toggle the visibility of a layer in JavaScript?
 
Can I use CSS classes to show and hide layers in JavaScript?
 
How can I hide a layer by default and show it when a specific event occurs?
 
Is it possible to animate the showing and hiding of a layer in JavaScript?
 
Are there any JavaScript libraries or frameworks that can help with showing and hiding layers?
 
What are some best practices for efficiently showing and hiding layers in JavaScript?
 
Can I show or hide multiple layers simultaneously using JavaScript?
 
How can I control the visibility of a layer based on user input or interaction?
 
Are there any cross-browser considerations when implementing show/hide functionality in JavaScript?
 
 
 
plus2net.com 
 
Источник
 
Hide HTML Buttons and Show Them Using Onclick
 
 
 
Use the CSS display Property to Show the Hidden Buttons in HTML
 
Use the jQuery show() Method to Show the Hidden Buttons in HTML
 
 
This tutorial will introduce a few methods to hide the HTML buttons and make them visible using the onclick event.
 
Use the CSS display Property to Show the Hidden Buttons in HTML
 
We can hide an HTML button first by setting its display property to none . Then, we can set the display property to inline or block using JavaScript.
 
Читайте также:  Javascript cookie with name
The display property inline or block will show the hidden HTML buttons. The difference between display: inline and display: block is that the inline component can have two or more components in a line or row.
 
But block components can have only one component in a line or row.
 
For example, create a button and name it Show . Set the onclick attribute of the button to makeChange() .
 
The makeChange() function is called with the click of the button Show . Then create the other three buttons and name them Button1 , Button2 and Button3 .
 
Set the id of Button1 as b1 , Button2 as b2 , and Button3 as b3 . In CSS, select the buttons by their id and set the display property to none .
 
Next, in JavaScript, create a function makeChange() . Inside that function, set the display property of each button to block .
 
Select the specific button by its id as document.getElementById("b1") for the first button. Then, set the display by assigning document.getElementById("b1")style.display to block .
 
Repeat it for the other two buttons.
 
button onclick="makeChange();">Showbutton> button id="b1">Button1button> button id="b2">Button2button> button id="b3">Button3button> 
 
function makeChange()   document.getElementById("b1").style.display = "block";  document.getElementById("b2").style.display = "block";  document.getElementById("b3").style.display = "block"; > 
 
Use the jQuery show() Method to Show the Hidden Buttons in HTML
 
We can also use the jQuery show() function to show the hidden HTML elements. The show() function only displays the selected HTML components whose display property is set to none .
 
It doesn’t work for HTML elements whose visibility property is set to none . We will use the same method as above to hide the buttons.
 
We will also reuse the HTML structure used in the method above.
 
After setting the display property of the button to none , create a makeChange() function in JavaScript. Inside the function, select the buttons with their id and call the jQuery show() method as $('#b1, #b2, #b3').show() .
 
When the Show button is clicked, the hidden buttons will be displayed. Thus, we can use the jQuery show() method to display the hidden buttons in HTML.
 
button onclick="makeChange();">Showbutton> button id="b1">Button1button> button id="b2">Button2button> button id="b3">Button3button> 
 
function makeChange()   $('#b1, #b2, #b3').show(); > 
 
Источник