Accordion ACF Repeater Loop
<?php //<~ don't add me in - code below goes into functions.php | |
add_shortcode( 'wpb_accordion_acf', 'wpb_accordion_acf' ); | |
/** | |
* Accordion Repeater Field | |
*/ | |
function wpb_accordion_acf() { | |
ob_start(); | |
// *Repeater | |
// accordion_repeater | |
// *Sub-Fields | |
// accordion_header | |
// accordion_content | |
?> | |
<style> | |
/* Style the buttons that are used to open and close the accordion panel */ | |
.accordion { | |
background-color: #eee; | |
color: #444; | |
cursor: pointer; | |
padding: 18px; | |
width: 100%; | |
text-align: left; | |
border: none; | |
outline: none; | |
transition: 0.4s; | |
margin-bottom: 10px; | |
border: none; | |
} | |
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ | |
.active, .accordion:hover, | |
button:focus { | |
background-color: #ccc; | |
background: #ccc; | |
border: none; | |
} | |
/* Style the accordion panel. Note: hidden by default */ | |
.panel { | |
padding: 0 18px; | |
background-color: white; | |
display: none; | |
overflow: hidden; | |
} | |
.accordion:after { | |
content: '\02795'; /* Unicode character for "plus" sign (+) */ | |
font-size: 13px; | |
color: #777; | |
float: right; | |
margin-left: 5px; | |
} | |
.active:after { | |
content: "\2796"; /* Unicode character for "minus" sign (-) */ | |
} | |
</style> | |
<?php | |
// check if the repeater field has rows of data | |
if( have_rows('accordion_repeater') ): | |
// loop through the rows of data for the tab header | |
while ( have_rows('accordion_repeater') ) : the_row(); | |
$header = get_sub_field('accordion_header'); | |
$content = get_sub_field('accordion_content'); | |
?> | |
<button class="accordion"><?php echo $header; ?></button> | |
<div class="panel"> | |
<p><?php echo $content; ?></p> | |
</div> | |
<?php | |
endwhile; //End the loop | |
else : | |
// no rows found | |
echo 'Come back tomorrow'; | |
endif; | |
return ob_get_clean(); | |
} |
<?php | |
// *Repeater | |
// accordion_repeater | |
// *Sub-Fields | |
// accordion_header | |
// accordion_content | |
?> | |
<style> | |
/* Style the buttons that are used to open and close the accordion panel */ | |
.accordion { | |
background-color: #eee; | |
color: #444; | |
cursor: pointer; | |
padding: 18px; | |
width: 100%; | |
text-align: left; | |
border: none; | |
outline: none; | |
transition: 0.4s; | |
margin-bottom: 10px; | |
border: none; | |
} | |
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ | |
.active, .accordion:hover, | |
button:focus { | |
background-color: #ccc; | |
background: #ccc; | |
border: none; | |
} | |
/* Style the accordion panel. Note: hidden by default */ | |
.panel { | |
padding: 0 18px; | |
background-color: white; | |
display: none; | |
overflow: hidden; | |
} | |
.accordion:after { | |
content: '\02795'; /* Unicode character for "plus" sign (+) */ | |
font-size: 13px; | |
color: #777; | |
float: right; | |
margin-left: 5px; | |
} | |
.active:after { | |
content: "\2796"; /* Unicode character for "minus" sign (-) */ | |
} | |
</style> | |
<?php | |
// check if the repeater field has rows of data | |
if( have_rows('accordion_repeater') ): | |
// loop through the rows of data for the tab header | |
while ( have_rows('accordion_repeater') ) : the_row(); | |
$header = get_sub_field('accordion_header'); | |
$content = get_sub_field('accordion_content'); | |
?> | |
<button class="accordion"><?php echo $header; ?></button> | |
<div class="panel"> | |
<p><?php echo $content; ?></p> | |
</div> | |
<?php | |
endwhile; //End the loop | |
else : | |
// no rows found | |
echo 'Come back tomorrow'; | |
endif; |
<script type='text/javascript'> | |
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 between hiding and showing the active panel */ | |
var panel = this.nextElementSibling; | |
if (panel.style.display === "block") { | |
panel.style.display = "none"; | |
} else { | |
panel.style.display = "block"; | |
} | |
}); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment