Closed Other Buttons While Click On One Of Them

i just searched about this nut i didn't find anything. so i have 5 buttons that when you clicked on them it shows a paragraph and if you click again it will hide that.but i wonder

Solution 1:

Let CSS handle the styling and leave javascript the responsibility of adding and removing that class

//Find all button elements in an element with the id "faq" and iterate them
document.querySelectorAll('#faq button').forEach(item => {
  //Add a on click event handler to each element
  item.addEventListener('click', function(event) {
    //Get parent element
    let parent = this.parentNode;

    //get current section with class="active"
    let active = document.querySelector("#faq .active");

    //Toggle active state class on parent
    parent.classList.toggle("active");

    //Remove the active class if not on clicked buttons parent.
    if (active && parent != active) {
      active.classList.remove("active");
    }

  });
});

#faq {
  list-style-type: none;
}


/*Hide anyting in inactive sections that are not buttons*/

#faq>:not(.active)> :not(button) {
  display: none;
}


/*Style the active button span*/

#faq>.active button>span {
  font-weight: bold;
  color: hsl(238, 29%, 16%);
}


/*Style the active button image*/

#faq>.active button>img {
  transform: scaleY(-1);
  margin-top: 5px;
}

<!-- H1 not a valid child of ul -->
<h1>FAQ</h1>
<ul id="faq">

  <li>

    <button type="button" id="arrowbtn1">
                <span id="span1">How many team members can I invite?</span>
                <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage1" class="arrowimage">
            </button>
    <p id="p1">
      You can invite up to 2 additional users on the<br> Free plan.There is no limit on team members for <br> the Premium plan.
    </p>
  </li>
  <li>
    <button type="button" id="arrowbtn2">
                <span id="span2">What is the maximum file upload size?</span>
                <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage2" class="arrowimage">
            </button>
    <p id="p2">
      No more than 2GB. All files in your account must<br> fit your allotted storage space.
    </p>
  </li>

  <li>
    <button type="button" id="arrowbtn3">
                <span id="span3">How do I reset my password?</span>
                <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage3" class="arrowimage">
            </button>
    <p id="p3">
      Click “Forgot password” from the login page or<br> “Change password” from your profile page.<br> A reset link will be emailed to you
    </p>
  </li>

  <li>
    <button type="button" id="arrowbtn4">
                <span id="span4">Can I cancel my subscription?</span>
                <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage4" class="arrowimage">
            </button>
    <p id="p4">
      Yes! Send us a message and we’ll process your<br> request no questions asked.
    </p>
  </li>

  <li>
    <button type="button" id="arrowbtn5">
                <span id="span5">Do you provide additional support?</span>
                <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage5" class="arrowimage">
            </button>
    <p id="p5">
      Chat and email support is available 24/7. Phone<br> lines are open during normal business hours.
    </p>
  </li>
</ul>