How can I apply my Javascript code to all members of the repeated members?

[ADuka]

Hello everyone,

I created a drop-down module and put it in a repeater.

I wrote a Javascript code that works fine for the first object in the repeater. When I try to add another object through the repeater the functionality doesn't work for the 2nd, 3rd, ... and other reapeated members. 

how can I apply the Javascript code to work for all the members of the repeater?

This is the Javascript code:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */

var button = document.querySelector(".dropbtn");

button.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

[alyssamwilie]

Not really sure what you're doing with the HTML... I only said to move the 'myDropdown' class, not change anything else. For brevity the code I provided was just a simplified version of the change, not the entire code. The entire code should look like this:

<div class="main-container">
{% for item in module.drop_down_group %}
<div class="main-wrapper myDropdown">
<div class="label">
<h6><span style="font-family: {{ item.filter_title_style.font }}; {{ item.filter_title_style.style }}; color: {{ item.filter_title_style.color }}; font-size: {{ item.filter_title_style.size }}{{item.filter_title_style.size_unit }};">{% inline_text field="filter_title" value="{{ item.filter_title }}" %}</span></h6>
</div>
<div class="dropdown">
<button class="dropbtn">
<span style="font-family: {{ item.button_text_style.font }}; {{ item.button_text_style.style }}; color: {{ item.button_text_style.color }}; font-size: {{ item.button_text_style.size }}{{item.button_text_style.size_unit }};">{% inline_rich_text field="button_text" value="{{ item.button_text }}" %}</span>
{% if item.button_arrow_image.src %}
{% set sizeAttrs = 'width="{{ item.button_arrow_image.width }}" height="{{ item.button_arrow_image.height }}"' %}
{% if item.button_arrow_image.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ item.button_arrow_image.width }}" height="{{ item.button_arrow_image.height }}" style="max-width: 100%; height: auto;"' %}
{% elif item.button_arrow_image.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ item.button_arrow_image.max_width }}" height="{{ item.button_arrow_image.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = item.button_arrow_image.loading != 'disabled' ? 'loading="{{ item.button_arrow_image.loading }}"' : '' %}
<img src="{{ item.button_arrow_image.src }}" alt="{{ item.button_arrow_image.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</button>

<div class="dropdown-content">
{% for item2 in item.content_group %}
<span style="font-family: {{ item2.content_text_style.font }}; {{ item2.content_text_style.style }}; color: {{ item2.content_text_style.color }}; font-size: {{ item2.content_text_style.size }}{{item2.content_text_style.size_unit }};">{% inline_rich_text field="content_text" value="{{ item2.content_text }}" %}</span>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>

[alyssamwilie]

First, you'll wat to change your "myDropdown" ID to a class, because there should never be multiple items on a page with the same ID.

Then you'll grab all items with that class using querySelectorAll and run a forEach with your toggle code inside so that it adds event listeners to each item.

// grab all items with "myDropdown" class using querySelectorAll
const dropdowns = document.querySelectorAll('.myDropdown')

// run a forEach on your dropdowns variable
dropdowns.forEach(dropdown => {
  // run your toggle code inside the forEach
  // replacing all document selectors with your forEach element 'dropdown'

  var button = dropdown.querySelector(".dropbtn");

  button.addEventListener("click", myFunction);
  function myFunction() {
    dropdown.classList.toggle("show");
  }
});

[ADuka]

Hello Alyssa,

Thanks so much for your response. I modified the code and still didnt work. I may be need to made some changes to my HTML as well. would you please on that as well?

This is my HTML code and the modified Javascript code

HTML CODE:

<div class="main-container">
{% for item in module.drop_down_group %}
<div class="main-wrapper">
<div class="label">
<h6><span style="font-family: {{ item.filter_title_style.font }}; {{ item.filter_title_style.style }}; color: {{ item.filter_title_style.color }}; font-size: {{ item.filter_title_style.size }}{{item.filter_title_style.size_unit }};">{% inline_text field="filter_title" value="{{ item.filter_title }}" %}</span></h6>
</div>
<div class="dropdown">
<button class="dropbtn">
<span style="font-family: {{ item.button_text_style.font }}; {{ item.button_text_style.style }}; color: {{ item.button_text_style.color }}; font-size: {{ item.button_text_style.size }}{{item.button_text_style.size_unit }};">{% inline_rich_text field="button_text" value="{{ item.button_text }}" %}</span>
{% if item.button_arrow_image.src %}
{% set sizeAttrs = 'width="{{ item.button_arrow_image.width }}" height="{{ item.button_arrow_image.height }}"' %}
{% if item.button_arrow_image.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ item.button_arrow_image.width }}" height="{{ item.button_arrow_image.height }}" style="max-width: 100%; height: auto;"' %}
{% elif item.button_arrow_image.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ item.button_arrow_image.max_width }}" height="{{ item.button_arrow_image.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = item.button_arrow_image.loading != 'disabled' ? 'loading="{{ item.button_arrow_image.loading }}"' : '' %}
<img src="{{ item.button_arrow_image.src }}" alt="{{ item.button_arrow_image.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</button>

<div class="dropdown-content myDropdown">
{% for item2 in item.content_group %}
<span style="font-family: {{ item2.content_text_style.font }}; {{ item2.content_text_style.style }}; color: {{ item2.content_text_style.color }}; font-size: {{ item2.content_text_style.size }}{{item2.content_text_style.size_unit }};">{% inline_rich_text field="content_text" value="{{ item2.content_text }}" %}</span>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>

Modified Javascript code

const dropdowns = document.querySelectorAll('.myDropdown');
dropdowns.forEach(dropdown => {
var button = dropdown.querySelector(".dropbtn");

button.addEventListener("click", function() {
document.getElementById("myDropdown").classList.toggle("show");
}
});

[alyssamwilie]

In your HTML move the myDropdown class into your main-wrapper so that your grabbing the entire item, not just the content.

<div class="main-container">
  {% for item in module.drop_down_group %}
    <div class="main-wrapper myDropdown">
        <!-- rest of content -->
    </div>
  {% endfor %}
</div>

Then in your Javascript
1. Your missing a parentheses on your event listener

2. Change document.getElementById("myDropdown") to dropdown

const dropdowns = document.querySelectorAll('.myDropdown');
dropdowns.forEach(dropdown => {
  var button = dropdown.querySelector(".dropbtn");

  button.addEventListener("click", function() {
    dropdown.classList.toggle("show");
  });
});

[ADuka]

Thanks so much Alyssa.

I have modified the HTML code as follow 

<div class="container">
  {% for item2 in item.content_group %}
    <div class="wrapper dropdown-content myDropdown">      
      <span style="font-family: {{ item2.content_text_style.font }}; {{ 
      item2.content_text_style.style }}; color: {{ item2.content_text_style.color }}; 
      font-size: {{ item2.content_text_style.size }}{{item2.content_text_style.size_unit 
      }};">{% inline_rich_text field="content_text" value="{{ item2.content_text }}" %}. 
      </span>
    </div>
  {% endfor %}        
</div>

I also change the Javascript as follow:

const dropdowns = document.querySelectorAll('.myDropdown');
dropdowns.forEach(dropdown => {
  var button = dropdown.querySelector(".dropbtn");

  button.addEventListener("click", function() {
    dropdown.classList.toggle("show");
  });
});

I ran the code and still didnt work. I really appreciate your time and efforts.