<dl class="faq"> <dt class="faq__question">Question 1</dt> <dd class="faq__answer">Answer 1</dd> <dt class="faq__question">Question 2</dt> <dd class="faq__answer">Answer 2</dd> <dt class="faq__question">Question 3</dt> <dd class="faq__answer">Answer 3</dd> </dl>
var answers = $('.faq__answer').hide(), questions = $('.faq__question').wrapInner('<button type="button"></button>'); answers.eq(0).show().prev().addClass('faq__question--active'); $('.faq').on('click', 'button', function(){ var question = $(this).closest('.faq__question'); if( ! question.hasClass( 'faq__question--active' ) ) { answers.slideUp(); questions.removeClass('faq__question--active'); question.addClass('faq__question--active').next('.faq__answer').slideDown(); } });