Sample code to get those nice FAQ page toggles. Answer is revealed on click.

Here is the CSS

.faqrow {
	width: auto;
	overflow: hidden;
	margin: 0 0 20px 0;	
	background-color: rgba(255,255,255,.05);
	border-radius: 10px;
}
.question {
	width: auto;
	float:left;
	margin: 10px;
	font-family: 'Muli', sans-serif;
	font-weight: bold;
	font-size: 20px;
	cursor:pointer;	
	line-height: 1.3;
	position: relative;
	padding: 0 0 0 20px ;
}
.question-image {
	width: 15px;
	height: 15px;
	position: absolute;
	left: 0px;
	top: 3px;
	background-image: url(images/faq.png);
	background-repeat: no-repeat;
	background-position: 0 0;	
}
.question-image.close {
	background-position: -15px 0;	
}
.answer {
	width: auto;
	float:left;
	margin: 10px;
	font-family: 'Muli', sans-serif;
	font-size: 14px;
	line-height: 1.3;
	padding: 0 0 0 40px;
	display:none;
}

This is an Advanced Custom Field Repeater field for FAQ’s on the FAQ page.  ( ACF Repeater for FAQ’s )

<?php /*
     ------------------------------------
        FAQ's
   ------------------------------------*/ ?>
 <?php if( have_rows('faqs') ): ?>
     <?php while ( have_rows('faqs') ) : ?>
         <?php the_row(); ?>
                    
            <div class="faqrow">
               <div class="question"><div class="question-image"></div><?php the_sub_field('question'); ?></div>
               <div class="answer"><?php the_sub_field('answer'); ?></div>
            </div><!-- faqrow -->
<?php endwhile; endif; // end faq's ?>

Finally, the jQuery that makes it toggle.

/*
		FAQ dropdowns
__________________________________________
*/
$('.question').click(function() {

    $(this).next('.answer').slideToggle(500);
    $(this).toggleClass('close');

});