JavaScript Show/Hide DIV Onclick Toggle
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of JavaScript show/hide div onclick toggle, in this article using JavaScript, we can show a div by clicking on a button and hide the div again by clicking on the button again.
We will see the different methods to show/hide div onclick toggle.
Step By Step Guide On JavaScript Show/Hide DIV Onclick Toggle :-
Method 1 -
Let’s look at the first method. let us see the HTML file first:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript show/hide div onclick toggle </title>
<style>
div {
display : inline ;
}
#no1 {
height : 100% ;
width : 100% ;
background-color : antiquewhite ;
color : rgb(158, 82, 47) ;
}
#no2 {
height : 100% ;
width : 100% ;
background-color : rgb(177, 233, 243) ;
color : rgb(39, 15, 95) ;
}
</style>
</head>
<body>
<section clas = " container " >
<section class = " secton-title " >
<button onclick = " showHideUsers() " >
Use me !
</button>
<div class="user">
<div id = " no1 " class = " username " >
NO1
</div>
<div id = " no2 " class = " username " >
NO2
</div>
</div>
</section>
</section>
< script src = " index.js " ></script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- To add CSS we used <style> tag inside the <head> tag.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- Create <section> with the class “container”.
- Create a button with onclick id” showHideUsers ()”.
- Create two div no1 and no2 with the class “username”.
- Add external JS file “index.js” with the script tag.
JavaScript code
//index.js
let usersSection = document.querySelector (".users-section") ;
let isShow = true ;
function showHideUsers(){
usersSection.style.display = " none ";
isShow = false ;
}
{
usersSection.style.display = " block " ;
isShow = true;
}
- querySelector() returns the first Element within the document that matches the selector.
- If the usersSection.style.display is none then the div will be hidden.
- And If the usersSection.style.display is block then the div will shown.
Method 2 -
Here in second method we are going to use the toggle method.
Let us see the html code first,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript show/hide div onclick toggle</title>
<style>
div{
background-color: aqua;
color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<h3>TalkersCode.com</h3>
<button> click me!</button>
<div>
toggle
</div>
<script>
let btn=document.querySelector('button');
let div=document.querySelector('div');
btn.addEventListener('click', () => {
if(div.style.display==='none'){
div.style.display="block";
}
else{
div.style.display='none';
}
} )
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- To add CSS we used <style> tag inside the <head> tag.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- Then create <h3>
- Create a <button> named Click me! And a <Div>
- Add the script tag
- Here we used .addEventListener tag to show/hide div onclick toggle.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to show/hide div onclick toggle using JavaScript.
I hope this article on JavaScript show/hide div onclick toggle helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
