CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
ryan
ryan

Reputation: 6655

How do I use bootstrap 3 collapse for an accordion without data- markup?

I'm trying to use bootstrap collapse for an accordion without all of the data- attribute markup. I see it toggle on creation but I want the two anchors in panel-title to control collapse. I know how to do this manually with jQuery but I think that I should be able to do it with one call to .collapse().

JS

$('.collapse').collapse();
//$('.t-title,.t-toggle').collapse(); // also tried this with no luck

HTML

<!-- notices start -->
<div class="row spaced" id="notice">
  <div class="col">
    <div class="panel-group" id="accordion">
      <!-- start update -->
      <div class="panel panel-warning">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="t-title" href="#notice-1">title</a>
            <a class="t-toggle" href="#notice-1">toggle</a>
          </h4>
        </div>
        <div id="notice-1" class="panel-collapse collapse in">
          <div class="panel-body"><p>content</p><p>content</p><p>content</p></div>
        </div>
      </div>
      <!-- / end update -->
      <!-- start update -->
      <div class="panel panel-success">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="t-title" href="#notice-2">title</a>
            <a class="t-toggle" href="#notice-2">toggle</a>
          </h4>
        </div>
        <div id="notice-2" class="panel-collapse collapse">
          <div class="panel-body"><p>content</p><p>content</p><p>content</p></div>
        </div>
      </div>
      <!-- / end update -->
      <!-- start update -->
      <div class="panel panel-danger">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="t-title" href="#notice-3">title</a>
            <a class="t-toggle" href="#notice-3">toggle</a>
          </h4>
        </div>
        <div id="notice-3" class="panel-collapse collapse">
          <div class="panel-body"><p>content</p><p>content</p><p>content</p></div>
        </div>
      </div>
      <!-- / end update -->
    </div>
  </div>
</div>

Upvotes: 2

Views: 5690

Answers (1)

zessx
zessx

Reputation: 68790

You can't leave data- markup aside, as the collapse() function is made to initialize the Collapse component, it's not an event trigger.

If you don't want to manually set every data-toggle attribute, you can at least use this line :

$('#accordion').find('.t-title, .t-toggle').attr('data-toggle', 'collapse');

Bootply

Upvotes: 2

Related Questions