How to use a toggle button to show elements depending on which button was clicked?

Question

I'd like to toggle content depending on which button I click. I have a list with events, all with a button: "show carpoolers". Every time I click the button, the list of carpoolers of that particular event should show.

X are all the lists of carpoolers (ul tag)
Y are all the buttons (h4 tag)

var x = document.getElementsByClassName("lijstcarpoolers");
var y = document.getElementsByClassName("bekijkcarpoolers");
var i;
for (i = 0; i < y.length; i++) {
  y[i].addEventListener('click', setcssclass() {
    if (x[i].style.display === "none") {
      x[i].style.display = "block";
    } else {
      x[i].style.display = "none";
    }
  });
}

How can I achieve this?

Edit:

This is a picture of all the lists:

Screenshot

'Bekijkcarpoolers', or var y are the buttons 'Bekijk medecarpoolers'. 'Lijstcapoolers', or var x are the bordered lists.

In this picture I'm showing them all. But when I put them on display: none, only the second one & fourth one open when clicking on 'Bekijk medecarpoolers'.

Edit 2

<?php
$my_attendees = tribe_tickets_get_attendees( $product_id );
?>
<h4 class="bekijkcarpoolers" style="display: block; cursor: pointer;">Bekijk medecarpoolers</h4>
<ul class="attendee_list_my_account lijstcarpoolers">
<?php
foreach ($my_attendees as $attendee) {
$user_info = get_userdata($attendee['user_id']);
?>

The H4 is the one to click on.

First of all, your code suffers from this [problem](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — ibrahim mahrir, Nov 06 '19 at 15:50
@ibrahimmahrir I'm just a beginner with Javascript. Is there a possiblity you can change my code to get it working? — wimkreatix, Nov 06 '19 at 15:52
Can you add a small snippett of the markup to the question please. I still don't see why this doesn't work — ibrahim mahrir, Nov 06 '19 at 16:17
I don't think so. The file I'm working in is a Woocommerce template to show orders in My Account. — wimkreatix, Nov 06 '19 at 16:24
Can you add a style `.hidden { display: none; }` instead of using the inline style? That would be better — ibrahim mahrir, Nov 06 '19 at 16:30
I did, but how do I have to change the Javascript function now? — wimkreatix, Nov 06 '19 at 16:34
I've editted my answer. Please check it out and tell me if it's working or not. Replace your whole code with the new one as you don't need to select the element nor the loop anymore — ibrahim mahrir, Nov 06 '19 at 16:39
@ibrahimmahrir that works just fine! Thanks a lot! & thanks for teaching me something new! — wimkreatix, Nov 07 '19 at 09:17

ibrahim mahrir · Answer 1 · 2019-11-06T16:43:29.603

0

Use event delegation like so:

document.addEventListener("click", function(ev) {
  var target = ev.target;

  if(target.classList.contains("bekijkcarpoolers")) {
    var ulElement = target.nextElementSibling;
    ulElement.classList.toggle("hidden");
  }
});

This adds a click event listener to the document. When a click happens in the document, we get the target of that click and check if it is a bekijkcarpoolers element or not, if so, we get the next element sibling of this target which is our ul element and we toggle its hidden class which should show/hide it accordingly.

Then add a style:

.hidden { display: none; }

And use it to hide/show the element instead of the inline style style="display: none/block".

edited Nov 06 '19 at 16:43

answered Nov 06 '19 at 15:54

ibrahim mahrir

31,174
5
48
73

It does work, but only on half of them. Only the ones with an even number do work. – wimkreatix Nov 06 '19 at 15:58
@wimkreatix are you sure the number of `lijstcarpoolers` elements match the number of `bekijkcarpoolers` elements? And that they are in the same order? – ibrahim mahrir Nov 06 '19 at 15:59
I uploaded a screenshot & some additional information. – wimkreatix Nov 06 '19 at 16:08

How to use a toggle button to show elements depending on which button was clicked?

1 Answers1