Snippets

Rik Kendell Accordion list using ACF

Updated by Rik Kendell
View revision

File page.php Modified

  • Ignore whitespace
  • Hide word diff 
-    <?php if ( have_rows( 'question_list' ) ) : ?>
+<?php if ( have_rows( 'question_list' ) ) : ?>
     
-		<dl class="accordion-list">
+	<dl class="accordion-list">
         
-			<?php while ( have_rows( 'question_list' ) ) : the_row(); ?>
+		<?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>
+			<dt><a href="javascript:void(0);"><?php echo get_sub_field('question'); ?></a></dt>
+			<dd><?php echo get_sub_field('answer'); ?></dd>
 
-			<?php endwhile; ?>
+		<?php endwhile; ?>
             
-		</dl>
+	</dl>
         
-	<?php endif; ?>
+<?php endif; ?>

File scripts.js Modified

  • Ignore whitespace
  • Hide word diff 
 // 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();
Created by Rik Kendell
View revision

File page.php Added

  • Ignore whitespace
  • Hide word diff 
+    <?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; ?>

File scripts.js Added

  • Ignore whitespace
  • Hide word diff 
+$(document).ready(function(){
+
+// FAQs Accordion
+	accordionList = function() {
+		var allPanels = $('.accordion-list > dd').hide();
+
+		$('.accordion-list > dt > a').click( function() {
+			allPanels.slideUp();
+			$(this).parent().next().slideDown();
+
+			return false;
+		})
+	}
+    
+	accordionList();
+    
+});
HTTPS SSH

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