Supporting each other

Community forums

Welcome, Guest

Forum

Main Forum

Developers

Accordion navigator in Bootstrap

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

Page:
1
2

TOPIC:

Accordion navigator in Bootstrap 5 years 11 months ago #5103

ymoore Offline Administrator Posts: 94 Thank you received: 6	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
	Please Inloggen or Create an account to join the conversation.

Accordion navigator in Bootstrap 5 years 11 months ago #5105

ronm
Offline
Administrator
Posts: 844
Thank you received: 247

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:

<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/

Attachments:

The following user(s) said Thank You: ymoore

Please Inloggen or Create an account to join the conversation.

Accordion navigator in Bootstrap 5 years 11 months ago #5106

ymoore Offline Administrator Posts: 94 Thank you received: 6	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.
	Please Inloggen or Create an account to join the conversation.

Accordion navigator in Bootstrap 5 years 11 months ago #5107

Fay Offline Elite Member Posts: 235 Thank you received: 88	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 The following user(s) said Thank You: ymoore
	Please Inloggen or Create an account to join the conversation.