Toggle show hide for multiple divs with one button

user_13930349 0
Viewed 975

I am trying to toggle multiple divs with same class via one button. At the moment, only the first div is doing the job and the rest gets ignored. I tried to change .getElementById to .getElementsByClassName but it also doesn´t do the trick. Can you please help? Here is my code. I´m trying since 2 days. :/

Code for Button:

<input onclick="change();myFunction()" type="button" value="Zeige Features" id="myButton1"></input>

Code for changing the text of button when clicked to "hide" / "show" (in German):

<script>function change() // no ';' here
{
    var elem = document.getElementById("myButton1");
    if (elem.value=="Zeige Features") elem.value = "Verstecke Features";
    else elem.value = "Zeige Features";
}</script>

The problem should be perhaps here. That´s the code for toggling the divs but only the first div does it:

<script>function myFunction() {
  var x = document.getElementById("toggle-div");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
} </script>

Hope u can help me, and thanks!

toggle button html java
3 Answers

Remove the semicolon from your onclick and add a space.

//New code
<input onclick="change() myFunction()" type="button" value="Zeige Features" id="myButton1"></input>

The text of Button will change pretty easily onclick.

<script>
function change()
{
var elem = document.getElementById("myButton1"); 

    if (elem.value=="Zeige Features") elem.value = "Verstecke Features";
    else elem.value = "Zeige Features";

}//function closed
</script>

Use getElementsByClass, it will give an array, so loop through the array, and change the style of each div one by one.

<script>
function myFunction() 
{
  var x = document.getElementsByClass("toggle-div");

for( var i=0;i<x.length;i++)
{
  if (x[i].style.display === "block") {
    x[i].style.display = "none";
  } else {
    x[i].style.display = "block";
  }
}
} 
</script>

You can use any loop other then for also, or you can use map()

user_144836970

there are several problems here. First of all you should get your element by class as it:

 document.getElementsByClassName("name-of-toggle-divs-class");

this will return an HTMLCollection, so you want to cast it to an array, like this:

Array.from(document.getElementsByClassName("name-of-toggle-divs-class"));

And then apply the style change to ALL of the elements. Resuming:

function myFunction(){
 const divArray = Array.from(document.getElementsByClassName("name-of-toggle-divs-class"));
 //Detecting the style you're going to use
 const displayStyle = divArray[0].display.style === 'block' ? 'none' : 'block';
 divArray.forEach(div => {
    div.style.display = displayStyle;
});

You should use class identifier because and id would suggest you have only one item. Let me know if you have problems.

You could also think of toggling class from your items defining class as:

 .div-of-toggle-divs-class{
   //some attributes
   display: block;
   &.invisible{
       display: none;
   }
  }

To do this just follow the same process as above and use the toggleClass method on the divArray elements. Try this:

<head>
     <style>
       .myClass {
             border: 1px solid black;
             margin-top: 2px;
             width: 100%;
        }
      </style>
      <script>
            function myFunction(){
            const divArray = 
            Array.from(document.getElementsByClassName("myClass"));
           //Detecting the style you're going to use
           const displayStyle = divArray[0].display.style === 'block' ? 'none' : 'block';
          divArray.forEach(div => {
          div.style.display = displayStyle;
         }); 
      </script>
</head>
<body>
        <div class="myClass"></div>
        <div class="myClass"></div>
        <div class="myClass"></div>
        <button type="button" onclik="myFunction()">CLICK ME</button>
</body>
user_145214970

Okay,

this was a pain in the ass but I think with a lot of workaround I solved it. Here is what I wanted to achive. Having three buttons and three divs. When I click one button alls three divs disappear and all three buttons change text to "hide". When click again, vice versa. I hope this helps everyone out there. I think to trigger all "classes" is in css much easier. These were my first steps in javascript and it was as difficult as chinese for me (don´t speak it :)).

// Toggle all buttons texts

function change() {
  var x = document.querySelectorAll("#button");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].value == "Zeige Features") {
      x[i].value = "Verstecke Features";
    } else {
      x[i].value = "Zeige Features";
    }
  }
}

// Toggle show and hide divs

function showhide() {
  var x = document.querySelectorAll("#toggle-div");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}
<!--Inserting 3 buttons-->

<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>

<!--Inserting 3 divs-->

<div id="toggle-div"> div 1 </div>
<div id="toggle-div"> div 2 </div>
<div id="toggle-div"> div 3 </div>

Thanks @pikachu_on_acid. Youre approach was the right one but still I had issues with it. Don´t wonder if you have to click two times at the beginning when u want to hide the divs. In my site they are first hidden, so they appear fist. If you want to reverse that just change the values from "block" "none" "block" to "none" "block" "none" in the java code.

Thanks for your help and regards!

user_139303490
Related