Foundation 6 Accordion Go to Active Tab

Foundation 6 Accordion Go to Active Tab

by vanduzled

HTML

<script src="http://akosmedia.com/foundation/foundation.js"></script>
<script src="http://akosmedia.com/foundation/foundation.min.js"></script>
<link rel="stylesheet" href="http://akosmedia.com/foundation/foundation.css">
<link rel="stylesheet" href="http://akosmedia.com/foundation/foundation.min.css">
<div class="row">
  <div class="large-12 columns">
    <div class="callout">
      <ul class="accordion" data-accordion data-allow-all-closed="true">

        <li class="accordion-item" data-accordion-item>
          <a class="accordion-title">1st Vestibulum egestas elit a urna viverra</a>
          <div class="accordion-content" data-tab-content>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a odio arcu. Curabitur facilisis hendrerit justo quis tincidunt. Donec sed dui vel dolor mattis ornare. Sed nunc odio, ultrices sit amet mi eget, aliquam tempus eros. Donec feugiat
              porta elit in iaculis. Morbi sollicitudin finibus mi. Cras eget vehicula nunc, a consectetur ante.</p>

            <p>Duis at libero volutpat, rutrum neque et, ultricies turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ullamcorper tincidunt tortor, a auctor erat porta ac. Curabitur ultrices sed nunc
              nec dignissim. Etiam facilisis, nibh pretium ultricies tincidunt, ligula nisl condimentum est, ac tempus purus enim sed magna. Sed tortor erat, accumsan ut enim eget, aliquam placerat leo. Pellentesque sed semper erat. Class aptent taciti
              sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vel lobortis nibh. Duis sit amet sapien urna. Vestibulum egestas elit a urna viverra, id tempor leo tempus.</p>

            <p>Nam blandit tempus tortor, sit amet accumsan massa vehicula placerat. Donec rutrum, nibh in iaculis porta, enim sapien rutrum tortor, vitae tempus nisl nibh quis metus. Sed id lorem turpis. Aenean dignissim ut massa ac lacinia....

CSS

.accordion-title {
  font-size: 2rem;
}

JavaScript

$(document).ready(
  function() {

    $(document).foundation();

    $(".accordion li > a").click(function() {
      var self = this;
      setTimeout(function() {
        theOffset = $(self).offset();

        var elem = $(this);

        $('html, body').animate({
          scrollTop: elem.offset().top
        }, 1000);
      });

    });

  });