CODEWITHSUNDEEP
jqueryzurb-foundation
red5
red5

Reputation: 312

Zurb Foundation 6: Trigger event when accordion menu opens?

I'm using Zurb Foundation 6 Accordion menus. How can I trigger a JQuery function when an accordion item opens? I think it might have something to do with down.zf.accordionMenu, but I haven't found any examples.

I found out from this post that I can test if any of the accordion menus are open, but what if I only want to test when a specific item opens? Here is the code for all of them:

jQuery('#id_of_accordion').on('down.zf.accordion', function() {
  //run code here
});

Upvotes: 0

Views: 1240

Answers (1)

user753676
user753676

Reputation:

You get the element as second parameter from your listener.

See https://github.com/foundation/foundation-sites/blob/develop/js/foundation.accordion.js#L282

this.$element.trigger('down.zf.accordion', [$target]);

https://api.jquery.com/trigger/ enter image description here

See the documentation for the handler at https://api.jquery.com/on/ enter image description here

Take a look at the console when you use this code:

<ul class="accordion" data-accordion>
  <li id="accordion-1" class="accordion-item is-active" data-accordion-item>
    <!-- Accordion tab title -->
    <a href="#" class="accordion-title">Accordion 1</a>

    <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
    <div class="accordion-content" id="accordion-content-1" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
   <li id="accordion-2" class="accordion-item" data-accordion-item>
    <!-- Accordion tab title -->
    <a href="#" class="accordion-title">Accordion 2</a>

    <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
    <div class="accordion-content" id="accordion-content-2" data-tab-content>
      <p>Panel 2. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <!-- ... -->
</ul>

$(document).foundation();

$('[data-accordion]').on('down.zf.accordion', function(event, element) {
  console.log(element);
  if($(element).attr('id') === 'accordion-content-2') {
    console.log('accordion 2 opened');
  }
});

See the codepen at https://codepen.io/DanielRuf/pen/OJNPWog

Upvotes: 1

Related Questions