Snippets

Rik Kendell Accordion list using ACF

Created by Rik Kendell last modified
<?php if ( have_rows( 'question_list' ) ) : ?>
    
	<dl class="accordion-list">
        
		<?php while ( have_rows( 'question_list' ) ) : the_row(); ?>

			<dt><a href="javascript:void(0);"><?php echo get_sub_field('question'); ?></a></dt>
			<dd><?php echo get_sub_field('answer'); ?></dd>

		<?php endwhile; ?>
            
	</dl>
        
<?php endif; ?>
$(document).ready(function(){

// FAQs Accordion
	accordionList = function() {
		var allPanels = $('.accordion-list > dd').hide();
		
		$('.accordion-list > dt > a').click( function() {
		
			// Version 1 - Standard
			allPanels.slideUp();
			$(this).parent().next().slideDown();
			// End of v1
			
			// Version 2 - Prevent closing of current visible item
			$target =  $(this).parent().next();
			if ( !$target.hasClass('active') ) {
				allPanels.removeClass('active').slideUp();
				$target.addClass('active').slideDown();
			} // End of v2
			
			// Prevent default 'link' behaviour
			return false;
		})		
		
	}
    
	accordionList();
    
});

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.