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


Since, you have gone through the HTML file. the next task is writing 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. 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.