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

Accordion navigator in Bootstrap

Neil Pollock
Topic Author
Offline
Premium Member

8 years 6 months ago #4912 by Neil Pollock

Accordion navigator in Bootstrap was created by Neil Pollock

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

Code:

$(".accordion").accordion({
  active: false
});

Please Log in or Create an account to join the conversation.

Neil Pollock
Topic Author
Offline
Premium Member

8 years 6 months ago #4913 by Neil Pollock

Replied by Neil Pollock on topic Accordion navigator in Bootstrap

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 Log in or Create an account to join the conversation.

ronm
Offline
Administrator

8 years 6 months ago #4914 by ronm

Replied by ronm on topic Accordion navigator in Bootstrap

Try something like this. You can obviously remove the button if you don't want that option.

Code:

<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 Log in or Create an account to join the conversation.

Neil Pollock
Topic Author
Offline
Premium Member

8 years 6 months ago #4916 by Neil Pollock

Replied by Neil Pollock on topic Accordion navigator in Bootstrap

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 Log in or Create an account to join the conversation.

ymoore
Offline
Administrator

8 years 2 months ago #5101 by ymoore

Replied by ymoore on topic Accordion navigator in Bootstrap

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 Log in or Create an account to join the conversation.

Neil Pollock
Topic Author
Offline
Premium Member

8 years 2 months ago #5102 by Neil Pollock

Replied by Neil Pollock on topic Accordion navigator in Bootstrap

Here's how I did it (I added a script page above the accordion).

Attachments:

Please Log in or Create an account to join the conversation.

Moderators: JohnSmith

Time to create page: 0.148 seconds

Accordion navigator in Bootstrap

Main Pages

Quick Links

Support

External resources