Picture of Chris Gillison
Combining Trickle & Accordion
by Chris Gillison - Friday, 17 February 2017, 10:58 AM

Hi everyone,

When clicking the Trickle button to scroll to an accordion component, the scroll only takes you as far as the Accordion component in its 'collapsed' state. So when you expand one of the Accordion items the content disappears off the bottom of the window so you then have to scroll manually to read it.

Could anyone offer a suggestion on how I could:

a) include some code on the Accordion buttons that auto-scrolls the page up the correct amount for the Accordion item content to be visible (my preferred solution) or

b) include some code on the Trickle so that it scrolls far enough up to accommodate the Accordion component in its expanded state?

Thanks and regards,


Picture of Oliver Foster
Re: Combining Trickle & Accordion
by Oliver Foster - Friday, 17 February 2017, 5:56 PM

a) this will depend on the screen size, if the screen is too short for the content, the user will have to scroll anyway.

https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/js/adapt-contrib-accordion.js#L87 < you want to add code here, so it runs after the animation has finished.


something which scrolls the window to the point at which the accordion content starts (+/- the height of the navigation bar)


b) if you have another trickle button after the accordion, there will never be enough white space to scroll. this is as the accordion creates space when it expands.

otherwise, adding code to trickle which specifically for the accordion would be a nono..

but it'd go here if you decided to do that: https://github.com/adaptlearning/adapt-contrib-trickle/blob/master/js/adapt-contrib-trickle.js#L103, which leads to here https://github.com/adaptlearning/adapt_framework/blob/master/src/core/js/adapt.js#L123 which allows you to use jquery.scrollTo's callback settings "onAfter" described here: https://github.com/flesler/jquery.scrollTo#settings


i hope that helps?

Picture of Chris Gillison
Re: Combining Trickle & Accordion
by Chris Gillison - Sunday, 19 February 2017, 12:41 PM

Thanks so much for getting me where I needed to go Oliver.

I realised that the article-reveal component had something similar so I cribbed something from that and inserted where you advised:

this.$el.velocity("scroll", {
      delay: 400,
      duration: 1000,
      offset: this.$el.height() - $(".navigation").outerHeight()

Works great in FF at least!

Regards, Chris