The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

Accordion navigator in Bootstrap

Meer
8 jaren 2 maanden geleden #5103 door ymoore
Beantwoord door ymoore in topic Accordion navigator in Bootstrap
Thanks Neil. It doesn't work for me yet, I get a strange result where half the content disappears. It may be a typo, so I'll persevere!

Thanks

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Meer
8 jaren 2 maanden geleden #5105 door ronm
Beantwoord door ronm in topic Accordion navigator in Bootstrap
Hi Yvonne
are you using the code I posted earlier in this thread? That code was added to source view of a text element and would need to be edited if using a combination of text element and script element as in Neil's example.
Attached is a screenshot of a text element with the code added in source view. You could try this yourself e.g. add a new empty text element, switch to source view and paste the following:
Code:
<p>&nbsp; </p> <p><span style="font-size:16px;">Click each session title&nbsp;below for more information about each session or use the expand/collapse all option for a quick glance of all the session details.</span> </p> <p>&nbsp; </p> <p class="sessionToggleBtn"><strong><a href="javascript:void(0);" id="expandTxt" onclick="expand()">Expand all <i class="fa fa-caret-down"></i></a></strong> </p> <p>&nbsp; </p> <script type="text/javascript"> setTimeout(function() { $(".accordion-body").removeClass("in"); }, 0); var toggle = 0; function expand() { if (toggle == 0) { $(".accordion-body").addClass("in").css("height", ""); $("#expandTxt").html("Collapse all <i class='fa fa-caret-up'></i>"); toggle = 1; } else { $(".accordion-body").removeClass("in"); $("#expandTxt").html("Expand all <i class='fa fa-caret-down'></i>"); toggle = 0; } } </script> <style type="text/css">.sessionToggleBtn a{ text-decoration:none; padding:8px; background:#f1f1f1; } } </style>
In the tree that should look something like the attached screenshot.



HTH
Ron

Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
Bijlagen:
De volgende gebruiker (s) zei dank u: ymoore

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Meer
8 jaren 2 maanden geleden #5106 door ymoore
Beantwoord door ymoore in topic Accordion navigator in Bootstrap
Thanks Ron.

The button worked as described - I'd mistaken the initial purpose which caused me some confusion!

It would be helpful if the accordion function came with an additional property setting so you could choose whether to have the content collapsed or expanded on page entry.

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Meer
8 jaren 2 maanden geleden #5107 door Fay
Beantwoord door Fay in topic Accordion navigator in Bootstrap
FYI - I've added an optional property to the navigator (called 'Collapse Accordion') that will allow you to collapse the accordion initially without adding the code yourself. It will be included in the next release.

Thanks
Fay
De volgende gebruiker (s) zei dank u: ymoore

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Moderators: JohnSmith
Tijd voor maken pagina: 0.144 seconden
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo