I need HELP in disabling dropdown styles for other questions when I click on just one of them

Question

I brought the necessary dom elements in with querySelectorAll(), I have been able to enable and disable the styles I want for each individual FAQ question dropdown when I Click but I also want to be able to disable the dropdowns for any other open questions that might be open when I click on just one.

JS script

const questionContainer = document.querySelectorAll('.question');

function triggerDropdown() {
  questionContainer.forEach((q) => {
    const summary = q.querySelector('.summary'),
      img = q.querySelector('.img'),
      dropdown = q.querySelector('.dropdown');


    q.addEventListener('click', function () {
      img.classList.toggle('flip');
      summary.classList.toggle('bold');
      
      summary.classList.contains('bold')
        ? (dropdown.style.display = 'inline-block')
        : (dropdown.style.display = 'none');
    });
  });
}

CSS styles to be changed

.dropdown {
  display: none;
}

/* Activate with JS */
.bold {
  font-weight: 700;
  font-size: 13px;
}

.flip {
  transform: scaleY(-1);
}

HTML

      <div class="content">
        <h1>FAQ</h1>
        <br />
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
        <p class="dropdown">
 ANSWERS TO QUESTION
        </p>
      </div>
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
        <p class="dropdown">
        ANSWERS TO QUESTION
        </p>
      </div>
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
        <p class="dropdown">
 ANSWERS TO QUESTION
        </p>
      </div>
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></p>
        <p class="dropdown">
           ANSWERS TO QUESTION
        </p>
      </div>
<div class="question">
        <p class="summary">QUESTION ASKED?<span class="arrow"><img class="img" src="images/icon-arrow-down.svg" alt="dropdown arrow"></span></h1>
        <p class="dropdown">
          ANSWERS TO QUESTION
        </p>
      </div>

      </div>

Answer 1

Essentially you could iterate over all the dropdowns:

const questionContainer = document.querySelectorAll('.question');
const dropdowns = document.querySelectorAll('.dropdown');

  questionContainer.forEach((q) => {
    const summary = q.querySelector('.summary'),
      img = q.querySelector('.img');

    q.addEventListener('click', function (event) {    
      img.classList.toggle('flip');
      summary.classList.toggle('bold');

      dropdowns.forEach (dropdown => {
          if (dropdown !== q.querySelector('.dropdown')) {
              // the dropdown that was clicked

              summary.classList.contains('bold')
                ? (dropdown.style.display = 'inline-block')
                : (dropdown.style.display = 'none');
          }
          else {
              // one of the other non-clicked dropdowns


          }
      });
    });
  });

Answer 2

With Bryan Grace's suggestion and help, I was able to figure out a way to toggle the css properties for the dropdown and at the same time remove those same properties for the unclicked questions.

Basically I iterated over the dropdowns, arrows, and summaries with a forEach to see if it matched with the clicked item, if it did not, the css properties were removed.

const questionContainer = document.querySelectorAll('.question');
const dropdowns = document.querySelectorAll('.dropdown');
const summaries = document.querySelectorAll('.summary');
const arrows = document.querySelectorAll('.img');

questionContainer.forEach((q) => {
  // individual variables for each question container
  const summary = q.querySelector('.summary'),
    qArrow = q.querySelector('.img');

  // Event Listener
  q.addEventListener('click', function () {
    qArrow.classList.toggle('flip');
    summary.classList.toggle('bold');

    dropdowns.forEach((dropdown) => {
      // If dropdown clicked matches dropdown iterated over enable dropdown properties
      if (dropdown === q.querySelector('.dropdown')) {
        summary.classList.contains('bold')
          ? (dropdown.style.display = 'inline-block')
          : (dropdown.style.display = 'none');

        //   If not a match, remove dropdown properties
      } else if (dropdown !== q.querySelector('.dropdown')) {
        dropdown.style.display = 'none';
        summaries.forEach((s) => {
          if (s !== summary) {
            s.classList.remove('bold');
          }
        });
        arrows.forEach((arrow) => {
          if (arrow !== qArrow) {
            arrow.classList.remove('flip');
          }
        });
      }
    });
  });
});

Although I feel like the code for this operation should be a lot less.