Skip to content Skip to sidebar Skip to footer
Home / Html

Show/hide Multiple Divs Javascript

Post a Comment
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 while now

Solution 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 -

<link rel="stylesheet" type="text/css" href="myStyle.css"> <script type="text/javascript" src="myScript.js"></script>

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;
    functiondivVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    functionhideNonVisibleDivs() {
      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";
        }
      }
    }
.buttonsa {
  font-size: 16px;
}
.buttonsa:hover {
  cursor:pointer; 
  font-size: 16px;
}
<divclass="main_div"><divclass="buttons"><ahref="#"onclick="divVisibility('Div1');">Div1</a> | 
<ahref="#"onclick="divVisibility('Div2');">Div2</a> | 
<ahref="#"onclick="divVisibility('Div3');">Div3</a> | 
<ahref="#"onclick="divVisibility('Div4');">Div4</a></div><divclass="inner_div"><divid="Div1">I'm Div One</div><divid="Div2"style="display: none;">I'm Div Two</div><divid="Div3"style="display: none;">I'm Div Three</div><divid="Div4"style="display: none;">I'm Div Four</div></div></div>

Solution 2:

if you want to hide/show all divs simultaneously than you have to give all divs same class for ex: .toggle and than you can do this:

functionmyFunction1(){
    $(".toggle").slideToggle();
}

if you want to hide/show one div at a time than you can do this with id : 

functionmyFunction1(){
    $("#myDIV1").slideToggle();
}

with different buttons :

function myFunction1(id){
    $("#"+id).slideToggle();
}

pass id here :

<buttononclick="myFunction1('myDIV1')">One</button><buttononclick="myFunction1('myDIV2')">Two</button><buttononclick="myFunction1('myDIV3')">Three</button><buttononclick="myFunction1('myDIV4')">Four</button>

Solution 3:

I found the answer to what I wanted with the .toggle function thanks for the help. The answer I found here: radomsnippets.com

Solution 4:

We can easily add an unlimited amount of buttons using reusable code.

here is a full example! Enjoy

<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>.generalclass {
  width: 100%;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
  margin: 10px;
  padding: 10px;
  display: none;
}

.button{
	background: red;
    padding: 10px;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    border: none;   
    
}

.button:hover{
	background: black;    
}

</style></head><body><buttonclass="button"onclick="myFunction('button1')">Button 1</button><buttonclass="button"onclick="myFunction('button2')">Button 2</button><divid="button1"class="generalclass"><p>I can show anything here</p></div><divid="button2"class="generalclass"><p>I can show anything here too and different from button 1</p></div><script>functionmyFunction(divid) {

  var x = document.getElementById(divid);  
  
  if (x.style.display == "none") 
  {
    x.style.display = "block";
  } 
  else {
    x.style.display = "none";
  }  
}
</script></body></html>

Post a Comment for "Show/hide Multiple Divs Javascript"