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 themdocument.querySelectorAll('#faq button').forEach(item => {
  //Add a on click event handler to each element
  item.addEventListener('click', function(event) {
    //Get parent elementlet 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>.activebutton>span {
  font-weight: bold;
  color: hsl(238, 29%, 16%);
}


/*Style the active button image*/#faq>.activebutton>img {
  transform: scaleY(-1);
  margin-top: 5px;
}

<!-- H1 not a valid child of ul --><h1>FAQ</h1><ulid="faq"><li><buttontype="button"id="arrowbtn1"><spanid="span1">How many team members can I invite?</span><imgsrc="images/icon-arrow-down.svg"alt="arrow down icon"id="arrowimage1"class="arrowimage"></button><pid="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><buttontype="button"id="arrowbtn2"><spanid="span2">What is the maximum file upload size?</span><imgsrc="images/icon-arrow-down.svg"alt="arrow down icon"id="arrowimage2"class="arrowimage"></button><pid="p2">
      No more than 2GB. All files in your account must<br> fit your allotted storage space.
    </p></li><li><buttontype="button"id="arrowbtn3"><spanid="span3">How do I reset my password?</span><imgsrc="images/icon-arrow-down.svg"alt="arrow down icon"id="arrowimage3"class="arrowimage"></button><pid="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><buttontype="button"id="arrowbtn4"><spanid="span4">Can I cancel my subscription?</span><imgsrc="images/icon-arrow-down.svg"alt="arrow down icon"id="arrowimage4"class="arrowimage"></button><pid="p4">
      Yes! Send us a message and we’ll process your<br> request no questions asked.
    </p></li><li><buttontype="button"id="arrowbtn5"><spanid="span5">Do you provide additional support?</span><imgsrc="images/icon-arrow-down.svg"alt="arrow down icon"id="arrowimage5"class="arrowimage"></button><pid="p5">
      Chat and email support is available 24/7. Phone<br> lines are open during normal business hours.
    </p></li></ul>