Jquery and Foundation 4 Accordion Deep Linking

Question

I'm using Foundation 4 accordion with deep linking set to true:

<div class="section-container accordion" data-section="accordion" data-options="deep_linking: true">
      <section class="section">
        <h3 class="title"> <a href="#panel1">Program Highlights <span class="arrow_down"></span></a></h3>
        <div class="content" data-slug="panel1">...

Despite Foundation docs saying this should work, this by itself does nothing... so I added:

$(document).foundation('section', {
    callback: function (){
    var containerPos = $('.active').offset().top;
   $('html, body').animate({ scrollTop: containerPos }, 200);
    }
  });

This works, but I wanted the accordion panels to close when clicked again, instead of having to click another panel. So I then add some code to toggle open/close each accordion panel and arrow up/down on click:

$(document).on('click','.accordion h3', function () {
    $(this).find('span').toggleClass("arrow_down arrow_up");
    $(this).next('div').toggle();
    var containerPos =  $(this).offset().top;
    $('html, body').animate({ scrollTop: containerPos }, 200);
});

Then only only the foundation callback works, not the toggling. So these both work individually, but when I have both in the script only the foundation callback works. How can I get both of these to work?

Answer 1

You can use data-options="one_up: true;" to collapse the content of you accordion. For example:

<div data-options="one_up: true;" data-section="accordion" class="section-container accordion"></div>