All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Show/Hide DIV Onclick Toggle

Last Updated : Mar 11, 2024

JavaScript Show/Hide DIV Onclick Toggle

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>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. To add CSS we used <style> tag inside the <head> tag.
  6. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  7. Create <section> with the class “container”.
  8. Create a button with onclick id” showHideUsers ()”.
  9. Create two div no1 and no2 with the class “username”.
  10. 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;
}
  1. querySelector() returns the first Element within the document that matches the selector.
  2. If the usersSection.style.display is none then the div will be hidden.
  3. 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>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. To add CSS we used <style> tag inside the <head> tag.
  6. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  7. Then create <h3>
  8. Create a <button> named Click me! And a <Div>
  9. Add the script tag
  10. 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.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪