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

Accordion navigator in Bootstrap

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

8 jaren 6 maanden geleden #4912 door Neil Pollock

Accordion navigator in Bootstrap werd gestart door 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
});

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

8 jaren 6 maanden geleden #4913 door Neil Pollock

Beantwoord door Neil Pollock in 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

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

ronm
Offline
Administrator

Meer

8 jaren 6 maanden geleden #4914 door ronm

Beantwoord door ronm in 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/

De volgende gebruiker (s) zei dank u: Neil Pollock

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

8 jaren 6 maanden geleden #4916 door Neil Pollock

Beantwoord door Neil Pollock in 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...

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

ymoore
Offline
Administrator

Meer

8 jaren 2 maanden geleden #5101 door ymoore

Beantwoord door ymoore in 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

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

8 jaren 2 maanden geleden #5102 door Neil Pollock

Beantwoord door Neil Pollock in topic Accordion navigator in Bootstrap

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

Bijlagen:

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Moderators: JohnSmith

Tijd voor maken pagina: 0.236 seconden

Gemaakt door Kunena

Accordion navigator in Bootstrap

Main Pages

Quick Links

Support

External resources