Accordion – Repeater

• Vince_M

• May 3, 2018 at 12:52 pm

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 -->

CSS

/* 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;
}

JS

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 */
		this.classList.toggle("active");

		/* Toggle beween hiding and showing the active panel */
		var panel = this.nextElementSibling;
		if (panel.style.maxHeight) {
			panel.style.maxHeight = null;
		} else {
			panel.style.maxHeight = 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') ?>
          </button>
	<?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.

• Vince_M

• May 6, 2018 at 12:52 am

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