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: stackoverflow.com/questions/21070101/… — Michael Benjamin
– Michael Benjamin, Commented Aug 4, 2015 at 2:15
Make them all members of the same class, then use the class as a selector and hide elements using the class name. — SPlatten
– SPlatten, Commented Aug 22, 2019 at 15:52

royki · Accepted Answer · 2015-08-04 03:13:54Z

9

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>

edited Aug 4, 2015 at 3:13

answered Aug 4, 2015 at 2:52

royki

1,7314 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michael Valentine Over a year ago

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.

royki Over a year ago

@MichaelValentine if it works great, then kindly accept the answer and upvote.

Michael Valentine Over a year ago

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.

royki Over a year ago

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.

pgray10 Over a year ago

is "divs" a typo in hideNonVisibleDivs?

Learner · Accepted Answer · 2015-08-05 03:11:36Z

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 5, 2015 at 3:11

answered Aug 4, 2015 at 2:24

Learner

3571 gold badge5 silver badges11 bronze badges

3 Comments

Michael Valentine Over a year ago

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.

Learner Over a year ago

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

Michael Valentine Over a year ago

thanks I didn't know about .toggle. Unfortantly .slidetoggle doesn't work in blogger for some reason.

Michael Valentine · Accepted Answer · 2015-08-05 06:33:24Z

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 5, 2015 at 6:33

Michael Valentine

611 gold badge1 silver badge2 bronze badges

Comments

jerryurenaa · Accepted Answer · 2019-08-22 15:51:03Z

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>

Collectives™ on Stack Overflow

Show/Hide Multiple Divs Javascript

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related