Как сделать спойлер, по нажатию на один закрывается второй?

Question

[Алексей]

Делаю спойлер, по нажатию появляется текст, как сделать чтобы по нажатию на один блок (спойлер), который закрыт, предыдущий который открыт закрылся автоматически?

<li class="faq-item">I have doubts.<i class="fas fa-chevron-up fa-up"></i>
 <p class="faq-item__hide">Contact our sales team./p>
   </li>

$(document).on('click', '.faq-item', function() { 
      $(this).children('.faq-item__hide').slideToggle();
      $(this).children('.fa-up').toggleClass('animate-rotate');
      $(this).closest('.faq-item').toggleClass('faq-bg');
   });

Comments

[edward_freedom]

перед открытием, закрывай открытые и открывай нужный

[Сергей]

Скрываете все элементы .faq-item__hide, и потом показываете нужный. Так же у всех .fa-up убрать класс animate-rotate

[Алексей]

edward_freedom, Добрый день. Как с этого варианта сделать ?

$(document).ready(function () {
  $('.faq-item').on('click', acardion);
});

function acardion() {
  $(this).children('.faq-item__hide').not($(this).next()).slideToggle();
  $(this).prev().slideToggle();
  $(this).children('.fa-up').toggleClass('animate-rotate');
  $(this).closest('.faq-item').toggleClass('faq-bg');
};

Answer 1

[BUTURUM]

Есть два варианта: либо мы закрываем все элементы которые могу быть открыты, либо мы записиваем открытый блок в переменную и закрываем только его.