0

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.

Mike
  • 709
  • 7
  • 19

1 Answers1

0

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>
Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
  • Thanks for the answer, I actually want to prevent the accordion from expanding when clicked, so setting the speed to 0 doesn't solve this. – Mike Jan 15 '16 at 01:28
  • I guess I'm confused. Why are you using an accordion if you don't want something that opens and closes? That's what accordions are for. – Colin Marshall Jan 15 '16 at 02:10
  • Yes but I want to put an text input field/button on the accordion title. If you click the accordion bar, it should open/close, but if you focus on the text input or click a button on the bar, it shouldn't. – Mike Jan 16 '16 at 00:14