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.

Social Link

Swapnil Raja

Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is aregular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.
Social Link

Latest posts by Swapnil Raja (see all)

Author: Swapnil Raja

Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is a regular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.