title: Bootstrap Collapse - each div by some class?
body: <p>.Have more than one div for collapsing with some class without ID:</p>
  
  <pre><code>&lt;div class="spoiler"&gt;
      &lt;div class="spoiler-btn"&gt;spoiler1&lt;/div&gt;
      &lt;div class="spoiler-body collapse"&gt;spoiler 1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="spoiler"&gt;
      &lt;div class="spoiler-btn"&gt;spoiler2&lt;/div&gt;
      &lt;div class="spoiler-body collapse"&gt;spoiler 2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="spoiler"&gt;
      &lt;div class="spoiler-btn"&gt;spoiler3&lt;/div&gt;
      &lt;div class="spoiler-body collapse"&gt;spoiler 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With data-attribute data-toggle="collapse" data-target=".spoiler-body" in .spoiler-btn plugin collapsing all div. But need collapsing only within parent .spoiler</p>
  
  <h2>Updated</h2>
  
  <p>I found right way for me:</p>
  
  <pre><code>$.fn.ready(function() {
      // Spoiler
      $(document).on('click', '.spoiler-btn', function (e) {
          e.preventDefault()
          $(this).parent().children('.spoiler-body').collapse('toggle')
      });
  });
  </code></pre>
  
  <p>Bootsprap collapse.js work with class "collapse". This class must be added.
  <code>$(document).on('click', '.spoiler-btn', function (){...})</code> - 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).</p>
  
  <p>Demo: <a href="http://jsfiddle.net/vralle/qX4Pt/" rel="nofollow">http://jsfiddle.net/vralle/qX4Pt/</a></p>
  
  <p>Thanks</p>