CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
vralle
vralle

Reputation: 514

Bootstrap Collapse - each div by some class?

.Have more than one div for collapsing with some class without ID:

<div class="spoiler">
    <div class="spoiler-btn">spoiler1</div>
    <div class="spoiler-body collapse">spoiler 1</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler2</div>
    <div class="spoiler-body collapse">spoiler 2</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler3</div>
    <div class="spoiler-body collapse">spoiler 3</div>
</div>

With data-attribute data-toggle="collapse" data-target=".spoiler-body" in .spoiler-btn plugin collapsing all div. But need collapsing only within parent .spoiler

Updated

I found right way for me:

$.fn.ready(function() {
    // Spoiler
    $(document).on('click', '.spoiler-btn', function (e) {
        e.preventDefault()
        $(this).parent().children('.spoiler-body').collapse('toggle')
    });
});

Bootsprap collapse.js work with class "collapse". This class must be added. $(document).on('click', '.spoiler-btn', function (){...}) - fast way listen click. Probably not worth the extra code in this case since we have to create a closure to hold it. The click event happens infrequently (or never if the user chooses not to interact with the accordion).

Demo: http://jsfiddle.net/vralle/qX4Pt/

Thanks

Upvotes: 0

Views: 3341

Answers (1)

bbone
bbone

Reputation: 626

First off it looks like you've got some syntactical issues with your html -- you're missing closing quotes when you're setting the spoiler-body class. You'll also want to add the 'in' class to the spoiler bYou're html should look like this.

HTML

<div class="spoiler">
    <div class="spoiler-btn">spoiler1</div>
    <div class="spoiler-body in">spoiler 1</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler2</div>
    <div class="spoiler-body in">spoiler 2</div>
</div>
<div class="spoiler">
    <div class="spoiler-btn">spoiler3</div>
    <div class="spoiler-body in">spoiler 3</div>
</div>

Next you'll want to modify your javascript to clean up the jQuery syntax a bit and then implement the collapse functionality rather than using the data attributes you described above. I've also wrapped your code in a closure for good measure.

JS

(function ($) {
  $(function () {
    var $spoilers = $('.spoiler'), 
    $spoilerBodies = $('.spoiler-body');

    $spoilerBodies.collapse();

    $spoilers.on('click', function() {
      var $target = $(this).find('.spoiler-body');
      $target.collapse('toggle');
    });
  });
})(jQuery);

Here's a working example.

Upvotes: 1

Related Questions