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 2 months ago #4912

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
Is there any way for the accordion navigator in Bootstrap pages to start with all panels fully collapsed?

I've tried to implement the jQuery option for this, but with no luck...
$(".accordion").accordion({
  active: false
});

Please Inloggen or Create an account to join the conversation.

Accordion navigator in Bootstrap 6 years 2 months ago #4913

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
Actually, I now realise this is Bootstrap, but I can't get the options here to work either... getbootstrap.com/2.3.2/javascript.html#collapse

Please Inloggen or Create an account to join the conversation.

Accordion navigator in Bootstrap 6 years 2 months ago #4914

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 840
  • Thank you received: 244
Try something like this. You can obviously remove the button if you don't want that option.
<p class="accordionToggleBtn"><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">.accordionToggleBtn a{
  text-decoration:none;
  padding:8px;
  background:#f1f1f1;
  }
  }
</style>
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/
The following user(s) said Thank You: Neil Pollock

Please Inloggen or Create an account to join the conversation.

Accordion navigator in Bootstrap 6 years 2 months ago #4916

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
Thanks, Ron.

That works just right.

I eventually realised it was the "in" class that was the issue, but for whatever reason I could get the removeClass function to work...

Please Inloggen or Create an account to join the conversation.

Accordion navigator in Bootstrap 5 years 10 months ago #5101

  • ymoore
  • ymoore's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 94
  • Thank you received: 6
Hi Ron

I'm trying to work this out too but I'm not sure where to put the code.

If I want all the accordian content to be collapsed when the page is first viewed, where does the code go? When I add javascript at the top level my page just stops displaying any content.

Any pointers would be welcome!

Thanks
Yvonne

Please Inloggen or Create an account to join the conversation.

Accordion navigator in Bootstrap 5 years 10 months ago #5102

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
Here's how I did it (I added a script page above the accordion).

Attachments:

Please Inloggen or Create an account to join the conversation.

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

Search