Reputation: 61

Show/Hide Multiple Divs Javascript

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.

Upvotes: 6

Answers (4)

jerryurenaa

Reputation: 4704

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>

Upvotes: 0

Michael Valentine

Reputation: 61

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

Upvotes: 0

Learner

Reputation: 357

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>

Upvotes: 1

royki

Reputation: 1683

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>

Upvotes: 9

Show/Hide Multiple Divs Javascript

Answers (4)

Related Questions