javascript toggle showing and hiding several div elements

Question

I have two divs on a page (id's MAY and JUNE) and two buttons on the page. The page startes off by showing the May div, with the June div hidden using css display: none

I am trying to create the correct javascript that will toggle between the two of them, but (after searching on here) I can only manage to get one to work.

Codepen showing issue is https://codepen.io/billteale/pen/zwBBez

<a href="#" id="button" >MAY</a>
<a href="#" id="button" >JUNE</a>
<!-- first div, shows on page load -->
<div id="MAY">
      <div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1>
     </div>
<!-- second div, hidden originally -->
  <div class="hidden" id="JUNE"> 
      <div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1>
      </div>

...and the current js is

var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
  var div = document.getElementById('MAY');
  if (div.style.display !== 'none') {
    div.style.display = 'none';
  }
  else {
    div.style.display = 'block';
  }
};

Eventually I will have four or more divs to toggle between, with each button showing its relevant div, and hiding the others.

Can anybody tell me how to add to the code I have here to make this work for multiple elements?

Answer 1

It can be done by setting the div id's in the anchor tag's href attribute, and showing the corresponding div while hiding the rest. It can be done for any number of div 's with no extra script, Just add the new div id to the new anchor tags href . You should give a common class to all the div 's like month to select them all.

 $("a.btn").click(function() { var id = $(this).attr("href"); $("div.month:visible").hide(); $(id).show(); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#MAY" class="btn" id="button-may">MAY</a> <a href="#JUNE" class="btn" id="button-june">JUNE</a> <!-- first div, shows on page load --> <div id="MAY" class="month"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>May 2017</strong></h1> </div> </div> <!-- second div, hidden originally --> <div class="month hidden" id="JUNE"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>June 2017</strong></h1> </div> </div> 

Answer 2

 div.style.visibility = "hidden"

this will completely hide your div. I'm pretty sure this is what you are asking for

also instead of that you can make a separate function and add o'clock to div

 <div onclick="nameoffunction()"></div>

the function can take in a parameter and each div on click function can have the parameter of its id

Answer 3

Your div were messed up! The snippet is working now with the help of jQuery.

 $("#JUNE").hide(); $("#MAY").show(); $('#button-may').on("click", function() { $("#JUNE").hide(); $("#MAY").show(); }); $('#button-june').on("click", function() { $("#JUNE").show(); $("#MAY").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="button-may">MAY</a> <a href="#" id="button-june">JUNE</a> <!-- first div, shows on page load --> <div id="MAY"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>May 2017</strong></h1> </div> </div> <!-- second div, hidden originally --> <div class="hidden" id="JUNE"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>June 2017</strong></h1> </div> </div> 

Answer 4

First you add a "div-toggle" class to each one of the divs you want to toggle. After that, you bind click events on your buttons, firing a function which takes an identifier as argument.

The function will run through your divs and set the one that has the argument id as visible, and hide the others.

This way you can add more divs to be toggled. You just have to mark them with the "div-toggle" class, set their id's and create their respective buttons.

 var divs = document.getElementsByClassName('div-toggle'); function toggle(id) { for (var i = 0; i < divs.length; i++) { var div = divs[i]; if (div.id == id) div.style.display = 'block'; else div.style.display = 'none'; } } 

 <a href="#" onclick="toggle('MAY')" >MAY</a> <a href="#" onclick="toggle('JUNE')" >JUNE</a> <!-- first div, shows on page load --> <div class="div-toggle" style="display:block;" id="MAY"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>May 2017</strong></h1> </div> </div> <!-- second div, hidden originally --> <div class="div-toggle" style="display:none;" id="JUNE"> <div style="background-color: lightgrey"> <h1 style="padding: 5px"><strong>June 2017</strong></h1> </div> </div>