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.
