title: Bootstrap collapse function difference between bootstrap v3.3.5 and v2.1.1
body: <p>I am using bootstrap v3.3.5 in my application and wanted to include collapse function such that, when user clicks on a link, div below it toggles. Referring to answer in this <a href="https://stackoverflow.com/questions/12805825/can-you-specify-a-data-target-for-bootstrap-which-refers-to-a-sibling-dom-elem">Can you specify a &quot;data-target&quot; for Bootstrap which refers to a sibling DOM element without using an ID?</a> I was able to achieve similar result as my requirement, in the below fiddle link<br>
  <a href="https://jsfiddle.net/szp1cg0k/" rel="nofollow noreferrer">https://jsfiddle.net/szp1cg0k/</a>, which is using bootstrap v2.1.1.min.js and v2.1.1.min.css</p>
  
  <p>But in the same fiddle when I include bootstrap v3.3.5.min.js and v3.3.5.min.css reference the toggle/collapse functionality doesn't work here, neither throws any error </p>
  
  <p>updated JS <a href="https://jsfiddle.net/ohoLxap6/2/" rel="nofollow noreferrer">https://jsfiddle.net/ohoLxap6/2/</a> </p>
  
  <p>html code:</p>
  
  <pre><code>&lt;fieldset class="fsStyle"&gt;      
                  &lt;legend class="legendStyle"&gt;
                    &lt;a data-toggle="collapse-next" data-target=".demo" href="#"&gt;Activity Log Filter Criteria4&lt;/a&gt;
                  &lt;/legend&gt;
                  &lt;div class="demo" &gt;
                          &lt;div class="col-md-2"&gt;
                              &lt;label for="activity_from_date" class="labelStyle"&gt;Activity From Date:&lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-4"&gt;
                              &lt;input name="fromDate" maxlength="10" size="11" tabindex="59" value="" onblur="javascript:DateFormat(this,event,true);" class="textInput" id="activity_from_date" type="text"&gt;
                          &lt;/div&gt;
        &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>script:</p>
  
  <pre><code>$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function() {
  console.log($(this).parent());
  var $target = $(this).parent().next()
  console.log($target);
  $target.data('collapse') ? $target.collapse('toggle') : $target.collapse()    
  });
  </code></pre>
  
  <p>Can anyone give me some hint where I am going wrong ? </p>
  
  <p>UPDATE:</p>
  
  <p>I am aware of the collapse function of bootstrap, I have multiple divs in my form and I want to include collapse function on most of the divs. One way to achieve this is </p>
  
  <pre><code>&lt;div data-toggle="collapse" data-target="#demo1"&gt;
    &lt;div id="demo1"&gt;
      &lt;p&gt;demo 1 ......&lt;/p&gt;
    &lt;/div&gt;
  &lt;div data-toggle="collapse" data-target="#demo2"&gt;
    &lt;div id="demo2"&gt;
      &lt;p&gt;demo 2 ......&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>But I dont want to use ids, instead I want to specify class. The reason being, I have jqtree at backend and I have to include clone function as well, so using ids would mean after cloning I need to take care of ids of cloned child node div. Hence want to use class instead , something like below</p>
  
  <pre><code>&lt;div data-toggle="collapse" data-target=".demo"&gt;
    &lt;div class="demo"&gt;
      &lt;p&gt;demo 1 ......&lt;/p&gt;
    &lt;/div&gt;
  &lt;div data-toggle="collapse" data-target=".demo"&gt;
    &lt;div class="demo"&gt;
      &lt;p&gt;demo 2 ......&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>