All TalkersCode Topics

Follow TalkersCode On Social Media

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

Onclick Show Div And Hide Other Div

Last Updated : Mar 11, 2024

Onclick Show Div And Hide Other Div

In this tutorial we will show you the solution of onclick show div and hide other div, today we are going to understand how to show a div and hide other div by clicking on a button with the help of JavaScript.

It is very important and most topic in beginner series of JavaScript. And most of developer doesn’t know that how to use this.

In this article, we are going to show some codes below with the help of which we can done this. Let see the code.

Step By Step Guide On Onclick Show Div And Hide Other Div :-

As, here below we can see that there is a code with the help of which we are able to create two divisions and a button also.

When you run this code, on browser you see only one div with text DIV1 and a button with text click me.

Now, when you click on this button you see that the text DIV1 disappears and it replaces with DIV2.

As, we want to say that DIV1 disappears and replaces with DIV2. Now, let us see code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Show div and hide other div using JavaScript</title>
   <script>
    function showhide() {
        if (document.getElementById('div_one').style.display == 'none') {
          document.getElementById('div_one').style.display = 'block';
          document.getElementById('div_two').style.display = 'none';
        }
        else {
          document.getElementById('div_one').style.display = 'none';
          document.getElementById('div_two').style.display = 'block';
        }
    }
  </script>
</head>
<body>
  <div id="div_one">Div 1</div>
  <div id="div_two" style="display:none ;">Div 2</div>
  <input id="Button" type="button" value="Click Me" onclick="showhide();" />
</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 <head> tag is used to contain information about 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.
  4. Now, here before closing head, we write our script, you can use this or write this before closing body also.
  5. Now, inside body here we create two divisions with different id’s and with a button. On click on button our showhide() function runs. One thing to note here that our second div is not visible, because we use display none on that.
  6. Now, in script we create a show hide function and inside this function. We write here that if our first division is not display then it will display our first division and hides second one.
  7. But if first division is already display then it will not be displayed on click of button and then second displayed. This all is done with the help of if condition, you can see codes in our example.
  8. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last in conclusion, here we can say that with the help of this article we able to show current div and hide other div by on click with the help of JavaScript.

I hope this tutorial on onclick show div and hide other div helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪