Javascript Toggle Display In Array

Question

I'm really new to Js, and so i'm trying to customize a wordpress plugin but without success. I'm using a plugin for events, that groups each element into list items, and i would like to have a button on each

that displays/hides the event description, i've looked for some Js code, but i can't make it work, already tried with for, if and forEach, and can't seem to make it work. Right now it's working, but instead of toggling each element, when you press the button it toggles all the descriptions. Any help?

<li class="program">
<h2> Program Title </h2>
<h3> 00:00 </h3>
<button onclick="toggle_visibility()">Description</button>
<div class="showdesc">show description is here</div>
</li>
<li class="program">
<h2> Program Title </h2>
<h3> 00:00 </h3>
<button onclick="toggle_visibility()">Description</button>
<div class="showdesc">show description is here</div>
</li>
<li class="program">
<h2> Program Title </h2>
<h3> 00:00 </h3>
<button onclick="toggle_visibility()">Description</button>
<div class="showdesc">show description is here</div>
</li>
<li class="program">
<h2> Program Title </h2>
<h3> 00:00 </h3>
<button onclick="toggle_visibility()">Description</button>
<div class="showdesc">show description is here</div>
</li>

<script type="text/javascript">
function toggle_visibility(){
   var els = document.getElementsByClassName('showdesc');
   for (var i=0; i<els.length; ++i){
      var s = els[i].style;
      s.display = s.display==='none' ? 'block' : 'none';
   };
}
toggle_visibility('showdesc');

</script>```

if you want to toggle the visibility of one element, you should have deferent ids for each element and then use that id in your function, to target that specific element of your html — Elmehdi
– Elmehdi, Commented Nov 4, 2020 at 13:41

astigmatik · Accepted Answer · 2020-11-04 11:56:49Z

1

It affects all the descriptions because they all have the same class name. The toggle visibility function literally toggles all of them at once. If you want to make it more specific, you have to come up with unique ids for every description. For example;

<div id="description1">Description here</div>

If you have 5 divs, then make sure the id="description" are different. They could be description1 description2, etc. And then, for their corresponding button, just put:

<button onclick="toggle_visibility("description1")">Description</div>

You have to change the description1 to description2 and so on for every button.

And your toggle_visibility function:

function toggle_visibility(id) {
    var thediv = document.getElementById(id);
    thediv.style.display = (thediv.style.display == 'none') ? 'block' : 'none';
}

answered Nov 4, 2020 at 11:56

astigmatik

1541 silver badge10 bronze badges

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

Collectives™ on Stack Overflow

Javascript Toggle Display In Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related