CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
M. Straw
M. Straw

Reputation: 502

Closing accordion panels when another opens

I'm working on an accordion panel group. They all open just fine, but I can't figure out how to get them to close upon opening another element.

Here is what I'm working on in terms of code:

<div class="container">
  <div class="row">
    <div id="trickslist">
      <ul>
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <div>
              <h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
            </div>
          </a>
          <div class="detail">

          </div>
        </li>           
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
          </a>
          <div class="detail">

          </div>
        </li>
        <li>
          <a class="expand">
            <div class="right-arrow">+</div>
            <h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
          </a>
          <div class="detail">

          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

I have tried to create new ids to call in JS/JQuery code, but nothing seems to be working.

var $myGroup = $('#trickslist');
$myGroup.on('show.bs.collapse', '.collapse', function () {
    $myGroup.find('.collapse.in').collapse('hide');
});

I figure it's in my script, but I'm not 100% on what I'm doing wrong.

Upvotes: 2

Views: 6759

Answers (3)

Kymera28
Kymera28

Reputation: 26

I updated your fiddle, hope that solves your problem =) Here is the jQuery. Check out the Fiddle

$(".expand").on("click", function () {
    $(".right-arrow").text("+");
    $(".detail:visible").slideUp();
    if(!$(this).next().is(":visible")){

        $(this).next().slideDown(200);
        $(this).find(".right-arrow").text("-");
    }
});

[EDITED]

On an ".expand" element click event all accordions will return to their initial state, closed and with the plus sign on the right. The accordion's detail section will only appear if that accordion is closed, to prevent it from hiding and appearing if clicked when opened. If the accordion is closed the detail section will appear and the plus sign will change to the minus one.

Upvotes: 1

Xavier J
Xavier J

Reputation: 4634

Save yourself a lot of time, grief, and maintenance by using a library that already has this functionality. Both jQuery UI and Kendo UI are tried-and-tested and have been used by developers all over the world. Someone else has already worked out the kinks. Work smart! (I don't work for either.)

https://jqueryui.com/accordion/

http://demos.telerik.com/kendo-ui/panelbar/api

Upvotes: 0

1GR3
1GR3

Reputation: 348

From your fiddle I can't see anything's expanding right now but there is a simple trick to achieve that functionality: at click hide all and than show just that particular.

$(".expand").click(function(){
    $(".detail").collaps();
    $(this).parent().find(".detail").expand();
});

Upvotes: 1

Related Questions