[Résolu] Clicking on Accordion tabs and scrolling a page

[Auteur]

Publications

[PiotrO586]

Hi,

I'd like a page to scroll to the Accordion tab header when I click on it. This is particularly helpful when the content of a tab is long, and I click on another tab and then the whole accordion disappears and the page needs to be scrolled up.

This can probably be done with some jQuery?

[Nigel]

Hi Piotr

You are mixing "accordions" and "tabs" as if they are the same thing, but they are different.

I assume you mean Bootstrap collapse items, is that right?

I added a bit of extra content to Bootstrap's demo on its documentation page to make a longer accordion item to show what happens if you have scrolled to the bottom of one long item and then click the header of the next item, so that all the page content moves upwards and the clicked heading disappears from view.

Is that the issue, as shown in my screen recording?

[PiotrO586]

Hi Nigel,

yeah I mean the accordion header (not a accordion tab), so the part you click to change the visible group. And yes, it is exactly the issue you recorded. I'd like the page moves up to the heading which is actually active.

[Nigel]

OK, well that's not really a Toolset issue, it's a Bootstrap issue.

You'll need to use JavaScript (or jQuery) to add an event handler to the accordion links to scroll to themselves when clicked.

I'm not aware of any custom event provided by Bootstrap for when the collapsing/expanding of the accordions is complete, which means you would be aiming for a moving target if you tried to scroll to the clicked link directly, so I expect you need to add a delay to allow the existing animation to complete first.