Home Forums Add-ons Repeater Field Accordion – Repeater


Accordion – Repeater

  • First off, I am really new to ACF and am hoping someone can help me. I would like to build a FAQ page. I have built it on my static site (code below)

    <div class="faqs">
     <button class="accordion">Question 1</button>
      <div class="panel">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla facilisi cras fermentum odio eu.</p>
    </div><!-- .panel -->


    /* FAQ
    -------------------------------------------------- */
    .accordion {
    	background-color: $medium-blue;
    	color: $rev-text;
    	cursor: pointer;
    	padding: 18px;
    	width: 100%;
    	text-align: left;
    	border: none;
    	outline: none;
    	transition: 0.4s;
    .accordion:after {
    	content: '\02795';  /* Unicode character for "plus" sign (+) */
    	font-size: 13px;
    	color: $rev-text;
    	float: right;
    	margin-left: 5px;
    .active, .accordion:hover {
    	background-color: $secfs-paleyellow;
    	color: $mid-text;
    .active:after {
    	content: "\2796";  /* Unicode character for "minus" sign (-) */
    .panel {
    	margin-bottom: 5px;
    	padding: 0 18px;
    	background-color: $rev-text;
    	max-height: 0;
    	overflow: hidden;
    	transition: max-height 0.2s ease-out;


    var acc = document.getElementsByClassName("accordion");
    var i;
    for (i = 0; i < acc.length; i++) {
    	acc[i].addEventListener("click", function() {
    		/* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */
    		/* Toggle beween hiding and showing the active panel */
    		var panel = this.nextElementSibling;
    		if ( { = null;
    		} else { = panel.scrollHeight + "px";

    Now I am looking to move this over to my WP theme that I am working on.

    I have built the Field Group FAQs with the field type set to Repeater with sub-fields set to question and answer.

    I have coded simple Field Groups. If someone can give me a quick hand and let me know where to start. I have the start worked out:

    <?php if( have_rows('faqs')): ?>
    	<?php while(has_sub_field('faqs')): ?>
              <button class="accordion">
                <?php the_sub_field('question') ?>
    	<?php endwhile; ?>
            <?php if(get_field('faqs')): ?>
              <?php $i = 1; ?>
              <?php while(has_sub_field('faqs')): ?>
                 <div class="panel">
                   <p><?php the_sub_field('answer') ?></p>
                 </div><!-- .panel --> 
             <?php endwhile; ?>
           <?php endif; ?>
    <?php endif; ?>

    If someone can take a look and let me know where I went wrong as the answer will not drop.

  • I have been able to work this out. Doing a bit of research and working through the code I have gotten this working.

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Accordion – Repeater’ is closed to new replies.