Master Snippet: Repeater Accordion

Documentation:

First field must be a repeater.

HTML:

<?php echo raindrop_accordion('additional_hours', false, false); ?>

CSS:

/* Raindrop Accordion */ .rd-accordion-container { height: 200px; position: relative; overflow: hidden; &.rd-accordion-loaded { overflow: visible; height: auto; } } .rd-accordion { border-bottom: 2px solid #ccc; overflow: hidden; opacity: 1; -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; &:first-child { border-top: 2px solid #ccc; } &.rd-accordion-hidden { opacity: 0; } } .rd-accordion-inner { overflow-x: hidden; overflow-y: auto; } .rd-accordion-title { position: relative; padding: 10px 0; cursor: pointer; h4 { margin: 0; padding-right: 20px; } i { position: absolute; right: 0; top: 50%; font-size: 24px; -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } .rd-accordion-loading { position: absolute; background-color: #fff; left: 0; top: 0; width: 100%; height: 100%; text-align: center; & > div { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } i { font-size: 30px; } } .rd-accordion-loaded { .rd-accordion-loading { display: none; } } .rd-accordion-expanded { .rd-accordion-title i { -webkit-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); -o-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } }

JS:

/* Raindrop Accordion */ var raindrop_accordion = { resizing: null, current_width: jQuery(window).width(), resized_width: jQuery(window).width(), open_first_accordion: true, collapse_other_accordions: true, init: function() { jQuery('.rd-accordion').each(function(){ var accordion = jQuery(this); var h = accordion.children('.rd-accordion-inner').outerHeight(); var collapsed_h = accordion.find('.rd-accordion-title').outerHeight(); accordion.attr('data-expanded-height', h); accordion.attr('data-collapsed-height', collapsed_h); accordion.css('height', collapsed_h + 'px'); }); jQuery('.rd-accordion-title').click(function(){ var target = jQuery(this).parents('.rd-accordion'); raindrop_accordion.click(target); }); jQuery(document).ready(function() { raindrop_accordion.ready(); }); jQuery( window ).resize(function() { raindrop_accordion.resize(); }); }, ready: function() { jQuery('.rd-accordion-hidden').css('display', 'none'); jQuery('.rd-accordion-container').addClass('rd-accordion-loaded'); var open_first_accordion = jQuery('.rd-accordion-container').attr('data-first-expand'); if (open_first_accordion == 'false') { raindrop_accordion.open_first_accordion = false; } if (raindrop_accordion.open_first_accordion == true) { var target = jQuery('.rd-accordion-container').children('.rd-accordion:first-child'); raindrop_accordion.click(target); } }, resize: function() { if (!this.resizing && jQuery(window).width() != this.current_width) { jQuery('.rd-accordion-container').removeClass('rd-accordion-loaded'); this.resizing = setInterval(this.resize_check, 500); } }, click: function(target) { var accordion = target; var current_h = accordion.outerHeight(); var expanded_h = accordion.attr('data-expanded-height'); var collapsed_h = accordion.attr('data-collapsed-height'); if (raindrop_accordion.collapse_other_accordions) { accordion.parents('.rd-accordion-container').children('.rd-accordion').each(function(){ var collapsed_other_accordions_h = jQuery(this).attr('data-collapsed-height'); jQuery(this).removeClass('rd-accordion-expanded'); jQuery(this).css('height', collapsed_other_accordions_h + 'px'); }); } if (current_h == expanded_h) { accordion.css('height', collapsed_h + 'px'); accordion.removeClass('rd-accordion-expanded'); } else { accordion.css('height', expanded_h + 'px'); accordion.addClass('rd-accordion-expanded'); } }, resize_check: function() { this.current_width = jQuery(window).width(); setTimeout(function(){ this.resized_width = jQuery(window).width(); if (this.current_width == this.resized_width) { clearInterval(raindrop_accordion.resizing); raindrop_accordion.resizing = null; setTimeout(function() { raindrop_accordion.reset(); }, 600); } }, 250); }, reset: function() { jQuery('.rd-accordion').removeAttr("style"); jQuery('.rd-accordion').removeClass('rd-accordion-expanded'); jQuery('.rd-accordion').each(function(){ var accordion = jQuery(this); var h = accordion.children('.rd-accordion-inner').outerHeight(); var collapsed_h = accordion.find('.rd-accordion-title').outerHeight(); accordion.attr('data-expanded-height', h); accordion.attr('data-collapsed-height', collapsed_h); accordion.css('height', collapsed_h + 'px'); }); this.ready(); }, reveal: function() { jQuery('.rd-accordion-hidden').css('display', 'block'); jQuery('.rd-accordion-hidden').each(function(i){ var t = i * 300; var elem = jQuery(this); setTimeout(function(){ elem.removeClass('rd-accordion-hidden'); }, t); }); } } raindrop_accordion.init();

PHP:

function raindrop_accordion($repeater, $amount_displayed = false, $data_first_expand = true) { $accordion = ''; if ($data_first_expand) { $accordion .= '<div class="rd-accordion-container">'; } else { $accordion .= '<div class="rd-accordion-container" data-first-expand="false">'; } if( get_field($repeater) ): $i = 0; while( has_sub_field($repeater) ): $title = get_sub_field('title'); $content = get_sub_field('content'); $accordion_class = 'rd-accordion'; if ($amount_displayed != false && $i >= $amount_displayed) { $accordion_class .= ' rd-accordion-hidden'; } $accordion .= '<div class="' . $accordion_class . '"><div class="rd-accordion-inner"><div class="rd-accordion-title"><h4>' . $title . '</h4><i class="fa fa-angle-down"></i></div><div class="rd-accordion-content">' . $content . '</div></div></div>'; $i++; endwhile; endif; $accordion .= '<div class="rd-accordion-loading"><div><i class="fa fa-spin fa-spinner"></i></div></div></div>'; return $accordion; }