CODEWITHSUNDEEP
javascripteventszurb-foundationaccordionzurb-foundation-6
Mike
Mike

Reputation: 779

How to prevent accordion animation in Foundation 6

I'm trying to create a form that uses accordions for organization using Foundation 6. I want to add inputs and buttons to the accordion title. Normally when the accordion title is clicked it, it toggles its content by sliding. I want to disable this effect, so that if I click the button in the title the content won't toggle, since it's really annoying if it expands and contracts every time I click the button.

I have something like:

    $body.on('click', '.button_on_title', function (event) {
      // do stuff
    });

I've tried event.preventDefault() and event.stopPropagation(), and they have no effect. It seems like Foundation 6 is somehow overriding the event stack?

Edit: To clarify, I want to prevent the accordion from opening and closing when clicked, not just remove the sliding animation.

Upvotes: 0

Views: 752

Answers (1)

Colin Marshall
Colin Marshall

Reputation: 2142

You just need to set the slide speed to 0 to disable the animation. One easy way to set the slide speed is through the data-slide-speed data attribute.

Here is the example from the docs with this attribute added:

<ul class="accordion" data-accordion data-slide-speed="0">
  <li class="accordion-item is-active">
    <a class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      I would start in the open state, due to using the `is-active` state class.
    </div>
  </li>
  <!-- ... -->
</ul>

Upvotes: 0

Related Questions