<dl class="faq"> <dt class="faq__question"><a href="#answer1" tabindex="1">Question 1</a></dt> <dd class="faq__answer" id="answer1">Answer 1</dd> <dt class="faq__question"><a href="#answer2" tabindex="1">Question 2</a></dt> <dd class="faq__answer" id="answer2">Answer 2</dd> <dt class="faq__question"><a href="#answer3" tabindex="1">Question 3</a></dt> <dd class="faq__answer" id="answer3">Answer 3</dd> </dl>
var answers = $('.faq__answer').hide(), questions = $('.faq__question'); answers.eq(0).show().prev().addClass('faq__question--active'); $('.faq').on('click', 'a', function(e){ e.preventDefault(); 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(); } });