Show/Hide Multiple Divs Javascript

Question

Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger. I\'ve been looking for an answer for a w

Answer 1

I would suggest to separate your code first - it would be then more clean and reusable - like myStyle.css, myScript.js, index.html

Add the css and js file in the html file like -

src -> indicates the source path of the file. Here I assume that all our css, js, 'html' file in same place.

 var divs = ["Div1", "Div2", "Div3", "Div4"];
    var visibleDivId = null;
    function divVisibility(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";
        }
      }
    }

.buttons a {
  font-size: 16px;
}
.buttons a:hover {
  cursor:pointer; 
  font-size: 16px;
}

Div1 | 
Div2 | 
Div3 | 
Div4


I'm Div One
I'm Div Two
I'm Div Three
I'm Div Four