dropdown with pure javascript

Question

I need a hand with a dropdown. every donation in the database I have a button that if clicked appears the items that were donated.

I have the following line of code:

user-donation.js

const dropdownBtns = document.querySelectorAll('.arrow img');
for (dropdownBtn of dropdownBtns){
    dropdownBtn.onclick = dropDown;
}
function dropDown(){
    const contents = document.querySelectorAll('.dropdown-content');
    for (let content of contents){
        content.classList.toggle("show");
    }
}

user-donations.js

<div class="dropdown">
    <div class="arrow">
        <img src="{% static 'images/arrow-down-icon.png' %}" alt="" id="arrow">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>

But when I click on any of the dropdownBtn I show the items of all donations and not just the one I want.

Someone will be able to help me ?

Answer 1

Put a parameter in the function dropDown() from where you can find out the origin of the click.

function dropDown(e){...
                  ↑

To know which element was clicked and which called the function, you use:

e.target

With this you can reach the element .dropdown-content related next. This element is the parent of the clicked button. You arrive at it with:

e.target.parentNode.nextElementSibling;
              ↑             ↑
             pai   irmão adjacente do pai

Example:

const dropdownBtns = document.querySelectorAll('.arrow_img');
for (dropdownBtn of dropdownBtns){
    dropdownBtn.onclick = dropDown;
}
function dropDown(e){
   let alvo = e.target.parentNode.nextElementSibling;
   alvo.classList.toggle('show');
}

.dropdown-content{
   display: none;
}
.show{
   display: block;
}

<div class="dropdown">
    <div class="arrow">
        <img src="https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png" alt="" class="arrow_img">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>
<div class="dropdown">
    <div class="arrow">
        <img src="https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png" alt="" class="arrow_img">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>

Note: in the images of the buttons you are using id="arrow". I imagine these buttons will be repeated, soon will repeat the same id, which is incorrect. A id should be unique on the page. Change the id="arrow" for class="arrow_img".

If you want to hide what is open when it shows another, change the code of the for adding a if to remove the class .show of what is open:

const dropdownBtns = document.querySelectorAll('.arrow_img');
for (dropdownBtn of dropdownBtns){
    dropdownBtn.onclick = dropDown;
}
function dropDown(e){

   let alvo = e.target.parentNode.nextElementSibling;

   const contents = document.querySelectorAll('.dropdown-content');
   for (let content of contents){
      if(alvo != content) content.classList.remove('show');
   }

   alvo.classList.toggle('show');

}

.dropdown-content{
   display: none;
}
.show{
   display: block;
}

<div class="dropdown">
    <div class="arrow">
        <img src="https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png" alt="" class="arrow_img">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>
<div class="dropdown">
    <div class="arrow">
        <img src="https://cdn3.iconfinder.com/data/icons/woothemesiconset/32/blue_arrow_down.png" alt="" class="arrow_img">
    </div>
    <div class="dropdown-content">
        <ul class="list-itens">
            {% for item in donation.items %}
            <li>{{item.material.name}} x{{item.quantity}}</li>
            {% endfor %}
        </ul>
    </div>
</div>