Edit in JSFiddle

<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();
    }
    
});