Question 227200 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Change the icon when clicked on the dropdown

I want to the the icon i.e change the arrow depending if the dropdown is closed or not. When the dropdown is closed I want to arrow to be down and when it is closed I want the arrow to be up. How do I fix this because I have multiple dropdowns?

const dropdownBtn = document.querySelectorAll('.b-footerMobile__item');
const dropdown = document.querySelectorAll('.b-footerMobile__dropdown');
const up = document.querySelectorAll('.b-footerMobile__up');
const down = document.querySelectorAll('.b-footerMobile__down');


dropdownBtn.forEach((btn)=>{
    btn.addEventListener('click',(e) =>{
        const target = e.currentTarget.dataset.dropdown;
        const current = document.getElementById(target);

        current.classList.toggle('active');
        dropdown.forEach((drop) =>{
            if(drop.id !== target){
                drop.classList.remove('active');
            }
        });
    })
})

<div class="b-footerMobile__menu">
    <div class="b-footerMobile__item" data-dropdown="dropdown1">
        <h2 class="b-footerMobile__title">Drop1</h2>
        <div class="bla">
            <img src="./images/arrow-down-mobile.svg" alt="arrow-down"
                class="b-footerMobile__arrow b-footerMobile__down">
            <img src="./images/arrow-up-mobile.svg" alt="arrow-down"
                class="b-footerMobile__arrow b-footerMobile__up">
        </div>
    </div>
    <div class="b-footerMobile__dropdown" id="dropdown1">
        <div class="b-footerMobile__li">
            <p class="b-footer__p">1</p>
        </div>
        <div class="b-footerMobile__li">
            <p class="b-footer__p">2</p>
        </div>
        <div class="b-footerMobile__li">
            <p class="b-footer__p">3</p>
        </div>
    </div>
</div>

<div class="b-footerMobile__item" data-dropdown="dropdown2">
    <h2 class="b-footerMobile__title">Drop2</h2>
    <div class="bla">
        <img src="./images/arrow-down-mobile.svg" alt="arrow-down"
            class="b-footerMobile__arrow b-footerMobile__down">
        <img src="./images/arrow-up-mobile.svg" alt="arrow-down"
            class="b-footerMobile__arrow b-footerMobile__up">
        </div>
    </div>
    <div class="b-footerMobile__dropdown" id="dropdown2">
        <div class="b-footerMobile__li">
            <p class="b-footer__p">1</p>
        </div>
        <div class="b-footerMobile__li">
            <p class="b-footer__p">2</p>
        </div>
        <div class="b-footerMobile__li">
            <p class="b-footer__p">3</p>
        </div>
                          
    </div>
</div>

.b-footerMobile__dropdown {
  display: none;
}
.b-footerMobile__dropdown.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #414141;
  width: 100%;
  padding: 1px 0;
  height: 90%;
}
.b-footerMobile__up {
  display: none;
}
.b-footerMobile__up.active {
  display: block;
}
.b-footerMobile__down {
  display: block;
}
.b-footerMobile__down.active {
  display: none;
}

I would like that operation to be written in JavaScript.

Tags:

2

Answers


  1. 0

    The dropdown used here is not semantically correct.

    I would recommend that you use a <select> element for your HTML structure.

    Then you can style that <select> using the examples given here on MDN:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#examples

    Login or Signup to reply.
  2. 0

    As far as I understand, you want to do something like this:

    const dropdownBtn = document.querySelectorAll('.b-footerMobile__item');
const dropdown = document.querySelectorAll('.b-footerMobile__dropdown');
const up = document.querySelectorAll('.b-footerMobile__up');
const down = document.querySelectorAll('.b-footerMobile__down');

dropdownBtn.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    const target = e.currentTarget.dataset.dropdown;
    const current = document.getElementById(target);

        e.currentTarget.querySelector('.bla').classList.toggle('active');
        
    current.classList.toggle('active');
    dropdown.forEach((drop) => {
      if (drop.id !== target) {
        drop.classList.remove('active');
      }

    });
  })
})
    .b-footerMobile__dropdown {
  display: none;
}
.b-footerMobile__dropdown.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #414141;
  width: 100%;
  padding: 1px 0;
  height: 90%;
}

.b-footerMobile__up {
  display: none;
}

.b-footerMobile__up.active {
  display: block;
}

.b-footerMobile__down {
  display: block;
}
.b-footerMobile__up {
  display: none;
}
.active .b-footerMobile__down {
  display: none;
}
.active .b-footerMobile__up {
  display: block;
}
    <div class="b-footerMobile__item" data-dropdown="dropdown1">
    <h2 class="b-footerMobile__title">Drop1</h2>
    <div class="bla">
        <img src="./images/arrow-down-mobile.svg" alt="arrow-down" class="b-footerMobile__arrow b-footerMobile__down">
        <img src="./images/arrow-up-mobile.svg" alt="arrow-up" class="b-footerMobile__arrow b-footerMobile__up">
    </div>
</div>
<div class="b-footerMobile__dropdown" id="dropdown1">
    <div class="b-footerMobile__li">
        <p class="b-footer__p">1</p>
    </div>
    <div class="b-footerMobile__li">
        <p class="b-footer__p">2</p>
    </div>
    <div class="b-footerMobile__li">
        <p class="b-footer__p">3</p>
    </div>
</div>
<div class="b-footerMobile__item" data-dropdown="dropdown2">
    <h2 class="b-footerMobile__title">Drop2</h2>
    <div class="bla">
        <img src="./images/arrow-down-mobile.svg" alt="arrow-down" class="b-footerMobile__arrow b-footerMobile__down">
        <img src="./images/arrow-up-mobile.svg" alt="arrow-up" class="b-footerMobile__arrow b-footerMobile__up">
    </div>
</div>
<div class="b-footerMobile__dropdown" id="dropdown2">
    <div class="b-footerMobile__li">
        <p class="b-footer__p">1</p>
    </div>
    <div class="b-footerMobile__li">
        <p class="b-footer__p">2</p>
    </div>
    <div class="b-footerMobile__li">
        <p class="b-footer__p">3</p>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search