Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
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 6 years 6 months ago #5103

  • ymoore
  • ymoore's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 96
  • Thank you received: 14
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 Log in or Create an account to join the conversation.

Accordion navigator in Bootstrap 6 years 6 months ago #5105

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 850
  • Thank you received: 261
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 Log in or Create an account to join the conversation.

Accordion navigator in Bootstrap 6 years 5 months ago #5106

  • ymoore
  • ymoore's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 96
  • Thank you received: 14
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 Log in or Create an account to join the conversation.

Accordion navigator in Bootstrap 6 years 5 months ago #5107

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 229
  • Thank you received: 92
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 Log in or Create an account to join the conversation.

  • Page:
  • 1
  • 2
Moderators: JohnSmith
Time to create page: 0.101 seconds
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search