Bootstrap collapse function difference between bootstrap v3.3.5 and v2.1.1

0
votes

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 Can you specify a "data-target" for Bootstrap which refers to a sibling DOM element without using an ID? I was able to achieve similar result as my requirement, in the below fiddle link
https://jsfiddle.net/szp1cg0k/, which is using bootstrap v2.1.1.min.js and v2.1.1.min.css

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

updated JS https://jsfiddle.net/ohoLxap6/2/

html code:

<fieldset class="fsStyle">      
                <legend class="legendStyle">
                  <a data-toggle="collapse-next" data-target=".demo" href="#">Activity Log Filter Criteria4</a>
                </legend>
                <div class="demo" >
                        <div class="col-md-2">
                            <label for="activity_from_date" class="labelStyle">Activity From Date:</label>
                        </div>
                        <div class="col-md-4">
                            <input name="fromDate" maxlength="10" size="11" tabindex="59" value="" onblur="javascript:DateFormat(this,event,true);" class="textInput" id="activity_from_date" type="text">
                        </div>
      </div>
</fieldset>

script:

$('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()    
});

Can anyone give me some hint where I am going wrong ?

UPDATE:

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 

<div data-toggle="collapse" data-target="#demo1">
  <div id="demo1">
    <p>demo 1 ......</p>
  </div>
<div data-toggle="collapse" data-target="#demo2">
  <div id="demo2">
    <p>demo 2 ......</p>
  </div>

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

<div data-toggle="collapse" data-target=".demo">
  <div class="demo">
    <p>demo 1 ......</p>
  </div>
<div data-toggle="collapse" data-target=".demo">
  <div class="demo">
    <p>demo 2 ......</p>
  </div>
2
javascriptjquerytwitter-bootstrap

2 Answers

1
votes

Got this working. I have updated the fiddle accordingly. https://jsfiddle.net/ohoLxap6/3/ 

$('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('bs.collapse') ? $target.collapse('toggle') : 
$target.collapse()    
});
0
votes

Why would you write your own code for a existing Bootstrap function? Following code is an example of the latest Bootstrap version collapse method:

<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
   Some text..
</div>

Docs: http://getbootstrap.com/javascript/#collapse

UPDATE:

According to your new question, collapsing using classes, I have created a custom script:

$('[data-toggle="collapse"]').click(function() {
   var $target = $(this).data('target');
   var $target = $($target);
   $target.data('bs.collapse') ? $target.collapse('toggle') : 
   $target.collapse()
});

Now all classes inside the data-target attribute will get toggled. https://jsfiddle.net/ohoLxap6/4/