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 while now and have been unable to find a good one that uses JavaScript and/or CSS. I am a bit of a novice so bear with me. Following is my code that works but I would like to simplify it and make it work so that it will close the div when I click the appropriate button again.

css

    <head>
    <style>
    #myDIV1 {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      display: none;
    }


    #myDIV2 {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      display: none;
    }


    #myDIV3 {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      display: none;
    }


    #myDIV4 {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      display: none;
    }

    </style>
    </head>

I know there is an easier way but this is the only way that I can find that works for what I want it to do for the most part

html

    <body>

      <p>Click button to see div.</p>

      <button onclick="myFunction1()">One</button>

      <button onclick="myFunction2()">Two</button>

      <button onclick="myFunction3()">Three</button>

      <button onclick="myFunction4()">Four</button>

    <div id="myDIV1">

      This is the div1 element.

    </div>

    <div id="myDIV2">

      This is the div2 element.

    </div>

    <div id="myDIV3">

      This is the div3 element.

    </div>

    <div id="myDIV4">

      This is the div4 element.

    </div>

Javascript

    <script> 

      function myFunction1() {

        document.getElementById("myDIV1").style.display = "block";

        document.getElementById("myDIV2").style.display = "none";

        document.getElementById("myDIV3").style.display = "none";

        document.getElementById("myDIV4").style.display = "none";

    }

    function myFunction2() {

      document.getElementById("myDIV1").style.display = "none";

      document.getElementById("myDIV2").style.display = "block";

      document.getElementById("myDIV3").style.display = "none";

      document.getElementById("myDIV4").style.display = "none";

    }

    function myFunction3() {

      document.getElementById("myDIV1").style.display = "none";

      document.getElementById("myDIV2").style.display = "none";

      document.getElementById("myDIV3").style.display = "block";

      document.getElementById("myDIV4").style.display = "none";

    }

    function myFunction4() {

      document.getElementById("myDIV1").style.display = "none"; 

      document.getElementById("myDIV2").style.display = "none";

      document.getElementById("myDIV3").style.display = "none";

      document.getElementById("myDIV4").style.display = "block";

    }

    </script>

Any help would be appreciated thanks in advance.

Have you looked at this: http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript — Michael Benjamin, Aug 04 '15 at 02:15
Make them all members of the same class, then use the class as a selector and hide elements using the class name. — SPlatten, Aug 22 '19 at 15:52

royki · Answer 1 · 2015-08-04T03:13:54.603

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;
    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;
}

<div class="main_div">
<div class="buttons">
<a href="#" onclick="divVisibility('Div1');">Div1</a> | 
<a href="#" onclick="divVisibility('Div2');">Div2</a> | 
<a href="#" onclick="divVisibility('Div3');">Div3</a> | 
<a href="#" onclick="divVisibility('Div4');">Div4</a>
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>

Works great just it goes to the top of the page every time I click one of the buttons and that causes problems when I use it with blogger. — Michael Valentine, Aug 04 '15 at 07:20
@MichaelValentine if it works great, then kindly accept the answer and upvote. — royki, Aug 04 '15 at 07:49
Well it works okay except for the fact that you goes back to the top of the page every time I click one of the links. — Michael Valentine, Aug 04 '15 at 21:25
Don't except everything you get it. Try to make your own from example. Here is for sharing /helping by ideas. So anyhow any ans is helpful, its always better to recognize. — royki, Aug 05 '15 at 07:47

Learner · Answer 2 · 2015-08-05T03:11:36.370

1

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:

function myFunction1(){
    $(".toggle").slideToggle();
}

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

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

with different buttons :

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

pass id here :

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

edited Aug 05 '15 at 03:11

answered Aug 04 '15 at 02:24

Learner

347
1
5
11

How do I get it to slide back up when I click the same button and can you show me this with multiple buttons for divs. – Michael Valentine Aug 04 '15 at 21:24
yes, you can do this with multiple buttons, you only have to do is call function onclick of button and pass the id of div to hide and show like this function myFunction1(id){ $("#"+id).slideToggle(); } – Learner Aug 05 '15 at 03:07
thanks I didn't know about .toggle. Unfortantly .slidetoggle doesn't work in blogger for some reason. – Michael Valentine Aug 05 '15 at 06:34

score 0 · Answer 3 · answered Aug 05 '15 at 06:33

0

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

answered Aug 05 '15 at 06:33

Michael Valentine

61
1
1
2

score 0 · Answer 4 · answered Aug 22 '19 at 15:51

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

here is a full example! Enjoy

<!DOCTYPE html>
<html>
<head>
<meta name="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>

<button class="button" onclick="myFunction('button1')">Button 1</button>

<button class="button" onclick="myFunction('button2')">Button 2</button>



<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>

<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>


<script>
function myFunction(divid) {

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


</body>
</html>

Show/Hide Multiple Divs Javascript

4 Answers4

Linked