Tagged: Accordion, tab section
I’ve created a page using a tab section with accordions in each tab section to break down a great deal of content. The problem is, switching between tabs does not close an accordion section that has been expanded.
Once a large accordion section is expanded, if the user selects a new tab, the page recognizes that an accordion section is still fully expanded, meaning any smaller accordion on other tabs is centered on a large page, and may not even be visible on a small screen without scrolling. Is there any way to force switching tabs to close any open accordion sections?
If this cannot be done I suppose creating 3 separate pages that look like a tab section will work instead, but we’d like to stick with the tab section on a single page if possible.
Thank you!
Hey CanarySystems,
Thank you for the inquiry.
This is possible but you will have to create a custom script that simulates a click event and triggers the .toggler.activeTitle whenever one of the tab section title is clicked.
// https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#how-to-add-a-custom-function
// https://www.w3schools.com/jquery/event_trigger.asp
// https://www.w3schools.com/jquery/event_on.asp
Best regards,
Ismael
Thanks for your reply, I was looking into this when I realized there was an option for the tab section “Content Height”
This was set to “same height for all tabs” so I tried changing it to “auto adjust to content” and the behavior is exactly what I wanted. Thanks anyway for the recommendation but it looks like no scripting is needed!
Hi CanarySystems,
GLad you found a solution for you :)
If you need further assistance please let us know.
Best regards,
Victoria