ACF + jQuery accordion w/ ScrollTo support

accordion.js

/*!
 * _accordion.js
 *
 * It's an accordion built with jQuery!
 *
 *

$('.accordion').accordion();

 *
 * @author  Robin Bastien <[email protected]>
 */


;(function($, window, document, undefined) {


    /**
     * Add the accordion function to the jQuery functions.
     *
     * @param  Object options An object containing options for the plugin.
     * @return Object         Returns the jQuery object.
     */
    $.fn.accordion = function(options) {

        // Get the height of the header
        var headerHeight = $('.site-header').height();

        // Recalculate the headerHeight on resize
        $(window).resize(function() {
          var headerHeight = $('.site-header').height();
        });

        // The default options for the plugin.
        var defaults = {
            scrollTo: true
        };

        // Extend the options with all the defaults and overwrite any supplied
        // options.
        options = $.extend(defaults, options);

        // Loop through each item that the plugin is attached to.
        this.each(function() {

            var accordion = $(this);

            // User clicks an accordion title
            $('.accordion__heading').click(function(e) {

                e.preventDefault();
                var target = $(this);
                var offset = target.offset().top;

                // Lets use the accordionClose function to close any expanded
                // accordion items
                accordionClose(accordion, target);
            });

        });

        function accordionClose(accordion, target) {

            // Get the index of the currently opened slide
            var activeSlideIndex = $('.accordion__item.is-active').index();

            // Save the height of current open element, given the target
            // accordion item is LOWER than the current open element. This is
            // used to calculate the height of the element for scrollTo
            if($('.accordion__item.is-active').length && activeSlideIndex < target.parents('.accordion__item').index()) {
              var activeSlideHeight = $('.accordion__item.is-active').height() - $('.accordion__item.is-active .accordion__heading').innerHeight();
            } else {
              var activeSlideHeight = 0;
            }

            // Slide er' up meng, and callback teh' accordionOpen, to you
            // guessed it... open the target accordion Item
            accordion.find('.accordion__collapse:visible').slideUp(500,accordionOpen(target, activeSlideHeight, activeSlideIndex));

            // Remove all other active classes so long as it ain't the
            // target's parent
            target.parents('.accordion__item')
                  .siblings('.is-active')
                  .removeClass('is-active')
                  .children()
                  .removeClass('is-active');
        }

        function accordionOpen(target, activeSlideHeight, activeSlideIndex) {
            // If the target is not the active item, we'll open the active
            // item
            if(!target.parents('.accordion__item').hasClass('is-active')) {
                    target.parents('.accordion__item').addClass('is-active');
                    target.next().addClass('is-active').slideDown(500, accordionScroll(target, activeSlideHeight, activeSlideIndex));

            } else {  // If the target IS the active item, all we need to do
              // is remove the .is-active classes

                    target.parents('.accordion__item').removeClass('is-active');
                    target.next().removeClass('is-active');

            }

        }

        // This makes the window focus on the target accordion item
        function accordionScroll(target, activeSlideHeight, activeSlideIndex) {

          if(options.scrollTo == true) {
             // Get teh' top offset of the target item so we can scroll to
             // teh' right place
             offset = target.offset().top;
             $('html, body').animate({ scrollTop: offset - headerHeight - activeSlideHeight  }, 500);
          }

        }

        // Return the object for chaining.
        return this;

    };

})(jQuery, window, document);

accordion.php

<div class="wrapper">

  <?php
  if(get_sub_field('title')) { ?><h2 class="section__heading"><?php the_sub_field('title'); ?></h2><?php }
  if(get_sub_field('content')) { ?><?php the_sub_field('content'); ?><?php }


  if(have_rows('accordion')) {
  $rowCount = 1; ?>

    <div class="accordion__container" id="accordion__item-<?php echo $rowCount; ?>">
    <?php


        while ( have_rows('accordion')) : the_row();

          $title = get_sub_field('name');
          $content = get_sub_field('content');
          $image = get_sub_field('image');
          $logo = get_sub_field('logo');

        ?>

          <div class="accordion__item" id="accordion__item-<?php echo $rowCount+1; ?>">
            <a class="accordion__heading" href="#accordion__item-<?php echo $rowCount; ?>"><?php echo $title; ?></a>

            <div class="accordion__collapse">

              <div class="grid">
                <div class="cell hand-1-1 lap-2-3">

                  <?php if(!empty($image)) { ?>
                    <img class="accordion__image" src="<?php echo $image['url']; ?>" alt="">
                  <?php } ?>

                  <?php if(!empty($content)) { ?>
                    <?php echo $content; ?>
                  <?php } ?>
                </div><!--

             --><div class="cell hand-1-1 lap-1-3">

                  <?php if(!empty($logo)) { ?>
                    <img class="accordion__logo" src="<?php echo $logo['url']; ?>" alt="">
                  <?php } ?>

                </div><!--.cell lap-3-4-->
              </div><!--.grid-->

            </div><!--.accordion__collapse-->

         </div><!--.accordion__item-->

        <?php $rowCount++; endwhile; ?>


    </div><!--.accordion-->
  <?php } ?>

</div><!--wrapper-->

style.css

/* ==========================================================================
   $ Accordion
   ========================================================================== */
.section.accordion {
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.accordion__heading,
.accordion__heading:link,
.accordion__heading:visited {
  color: #13a89e;
  font-size: 0.9em;
  font-weight: 500;
  border-bottom: 1px solid #ebebeb;
  padding: 0.25em 5% 0.25em 0;
  text-decoration: none;
  position: relative;
  display: block;
  width: 100%;
}

.accordion__heading:after {
  position: absolute;
  content:"\f067";
  font-family: fontAwesome;
  padding: 0.3em 0.5em 0.1em;
  background-color: #13a89e;
  text-align: center;
  color: white;
  top: 1em;
  right: 0;
  font-size: 0.55em;
}

.accordion__item.is-active .accordion__heading:after {
  content: "\f068";
}

.accordion__collapse {
  display: none;
  padding: 1em 0 ;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.accordion__item p:last-child {
  margin-bottom: 0;
  padding-bottom: 1.5em;
}

@media only screen and (min-width: 40em) {
  .accordion__heading,
  .accordion__heading:link,
  .accordion__heading:visited {
    font-size: 1.25em;
  }
}