Show and hide multiple div using javascript

Today I’m going to demonstrate a working example of show and hide multiple div using Javascript. This small tutorial will guide you through step by step process. You can also try our tryit editor or can just download the script by clicking on the download button.

Although Javascript could be a bit lengthy process to show and hide multiple div, but this can be done using pure Javascript. You can also read show and hide multiple div using Jquery, which is a bit smaller and easy to understand.

I think the best part of these small Javascript function is, you don’t have to implement any additional library to consequence the script. The core script can do all the stuffs you want. So just lets start, see the below working example

Download This Script

You will be required the following skills to use this example

  • Javascript
  • HTML
  • CSS

So let’s start with the HTML file, Your HTML file should look something like this

<div class="buttons">
  <a href="#" onclick="toggleVisibility('Menu1');">Menu1</a>
  <a href="#" onclick="toggleVisibility('Menu2');">Menu2</a>
  <a href="#" onclick="toggleVisibility('Menu3');">Menu3</a>
  <a href="#" onclick="toggleVisibility('Menu4');">Menu4</a>
</div>

  <div id="Menu1">I'm container one</div>
  <div id="Menu2" style="display: none;">I'm container two</div>
  <div id="Menu3" style="display: none;">I'm container three</div>
  <div id="Menu4" style="display: none;">I'm container four</div>

Download


Now, you have gone through the HTML file. Now you will have to write a small script of JavaScript, which will be used to show and hide the multiple divs. Your Javascript will look like this.

    var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        //visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

Download


Now this script will work for simple show and hide div or toggle div. There is no additional action required for this. But If you want to implement some style on it, you can add some CSS also. Below I’m going to show the style that can be used for this.

.main_div
  {
  text-align:center;
  background: #00C492;
  padding:20px; width: 400px;
  }
.inner_div
  {
  background: #fff;
  margin-top:20px;
  height: 100px;
  }
.buttons a
  {
  font-size: 16px;
  }
.buttons a:hover
  {
  cursor:pointer;
  font-size: 16px;
  }

Download


That’s all done now. Now this example will work properly for toggling of divs using pure Javascript. If you still have any issue with toggle div or show hide div using Javascript, you can leave a comment below in the comment box and I will get back to you.



  • http://www.geckografix.guru geckografix

    Great stuff many thanks

    • http://www.html5andcss3.org/ swapnil raja

      I appreciate your comment

  • Subhash Basistha

    Great Stuff, but when I double click the menu item the content disappear . Can You suggest any solution ?

    • Andy Penn

      if anyone ever reads this you can fix it by doing the following:

      var divs = [“Menu1”, “Menu2”, “Menu3”, “Menu4”];
      var visibleDivId = null;
      function toggleVisibility(divId) {
      if(visibleDivId === divId) {
      //visibleDivId = null;
      } else {
      visibleDivId = divId;
      }
      hideNonVisibleDivs();
      }
      function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
      divId = divs[i];
      div = document.getElementById(divId);
      if(visibleDivId === divId) {
      div.style.display = "block";
      } else {
      div.style.display = "none";
      }
      }
      }

  • Melissa

    This is great! It fixed my issue of going back to the top of the page. But now when I look at my code (inspect element), I get this error “Uncaught SyntaxError: Unexpected end of input” I tried putting the code below the “javascript:void()”. Any advice or should I simply ignore this error?

  • Christopher Bobby

    by default it shows what is inside container 1 right? How do I make it to empty div instead (by default)? So only when user clicks div one then the container 1 appears.
    Lots of thanks!

    • http://www.html5andcss3.org/ swapnil raja

      Search this:
      I'm container one

      and replace with:
      I'm container one

  • Pamela Valure

    So how would you do this with multiple blocks of “Menus” on one page. I can call each div a specific name and get them to show on click, but it hides all content. I only want the click to affect the box you click in.

Show Buttons
Hide Buttons