Menu icon Foundation
F5: Accordion events

Zurbians,

is there an easy way to detect the event when an accordion has expanded?

thx!
klim

accordionF5

Zurbians,

is there an easy way to detect the event when an accordion has expanded?

thx!
klim


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Howdy!

Check out this Pen I made: http://codepen.io/winghouchan/pen/Lqfhw

This should get you on the right track. You will need to open up your Console as the script logs when Accordion is opened and closed.

Wing-Hou Chan over 5 years ago

Thank you for the giving the situation!

Yep, that's true.

I guess you could add a very short delay —  that the user won't notice, maybe about 50ms —  after the click event and before the computation starts.

Not sure if this would work but you could try it.

K Lim over 5 years ago

My use-case for accordion is that each of the DD has content with scrollable divs of sections. What I want to make sure is that when a DD is clicked and the content expands, the selected item in the div is scrolled into view. I can compute with scrollTop() to do that. However, the computation only works if the containing div is not hidden. That is the reason why I need a way to detect when the content of the DD becomes visible.

Detection of the click events as described in your Pen precedes the event when the content becomes visible. I cannot do the computation then as the content would still be hidden.

Thanks for you input!

klim

Wing-Hou Chan over 5 years ago

Sorry, I don't quite get what you want.

The click immediately precedes the Accordion tab open/close. So detecting the click is probably the best way to detect if Accordion has opened or closed.

K Lim over 5 years ago

Thx!

but it is not quite what I am looking for. Detecting the click like in your Pen only tells us when the dd elements in the accordion is about to open/close. What I am looking for is the detection of the event when the content actually becomes visible.

klim

Wing-Hou Chan over 5 years ago

Howdy!

Check out this Pen I made: http://codepen.io/winghouchan/pen/Lqfhw

This should get you on the right track. You will need to open up your Console as the script logs when Accordion is opened and closed.