FAQ

faq.js

  $('.faq__question-header').on('click', function() {
    let value = $(this).data('header');
    let panel = $(this).next().prop('scrollHeight');

    
    // Remove all styles
    $('.faq__question-body').css({
      'maxHeight': '0px',
      'padding'  : '0 20px' 
    });
    $('.faq__question-header-icon').removeClass('icon-is-active');
    
    // Add styles to this element
    $('div[data-body="' + value + '"]').css({
      'maxHeight': panel + 'px',
      'padding'  : '20px' 
    });
    $('div[data-icon="' + value + '"]').toggleClass('icon-is-active');

    

    if($(this).hasClass('faq-header-is-open')) {
      $('div[data-icon="' + value + '"]').removeClass('icon-is-active');
      $('div[data-body="' + value + '"]').css({
        'maxHeight': '0px',
        'padding'  : '0 20px'  
      });
      $(this).removeClass('faq-header-is-open');
    } else {
      $('.faq__question-header').removeClass('faq-header-is-open');
      $(this).addClass('faq-header-is-open');
    }

  })
	
	
	
// Or java script
const header = document.getElementsByClassName("faq__question-header");
let i;

for (i = 0; i < header.length; i++) {
	header[i].addEventListener("click", function() {
		this.children[1].classList.toggle("icon-is-active");
		const panel = this.nextElementSibling;
		if (panel.style.maxHeight && panel.style.padding){
			panel.style.maxHeight = null;
			panel.style.padding = null;
		} else {
			panel.style.maxHeight = panel.scrollHeight + "px";
			panel.style.padding = "20px";
		} 
	});
}