How to initialize bootstrap 4.6 collapse with javascript?-CodePudding

Bootstrap 4.6 docs mention that we can enable/initialize the collapse menu with eaither data- attributes or javascript. I assume data-target is still necessary to link a button to the collapsable element. This leaves me with data-toggle="collapse", which I assume further is equivalent of the javascript initilization. So lets try it out:

$("#demo").collapse() //doesn't work

$("#demo").collapse({
  toggle: false
}) //doesn't work either!!

$("#demo").collapse("toggle"); //doesn't do nothing

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <button id="mybtn" type="button" class="btn btn-primary"  data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

As you can see, I am unable to initialize the collapse function through javascript alone. So my question is:

How to enable/initialize bootstrap 4.6 collapse without data-toggle attribute, using javascript? Note data-target is still allowed.
What does passing the options object in the initialization do? Especially what's the difference between passing {toggle: false} and {toggle: true}? Can I pass {toggle: "collapse"}?

CodePudding user response：

Try this

// activates your content as a collapsible element
$('#myCollapsible').collapse();

$('#collapseButton').on('click', function() {
  // toggles a collapsible element to shown or hidden
  $('#myCollapsible').collapse('toggle');
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<button class="btn btn-primary" type="button" id="collapseButton">Toggle Collapse (Shown On Load)</button>

<div id="myCollapsible">
  <div class="card card-body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
  </div>
</div>

Use of class="collapse" and {toggle: false} makes the collapse hidden on load

// activates your content as a collapsible element
$('#myCollapsible').collapse({toggle: false});

$('#collapseButton').on('click', function() {
  // toggles a collapsible element to shown or hidden
  $('#myCollapsible').collapse('toggle');
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<button class="btn btn-primary" type="button" id="collapseButton">Toggle Collapse (Hidden On Load)</button>

<div class="collapse" id="myCollapsible">
  <div class="card card-body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
  </div>
</div>

CodePudding user response：

You need to add an action on your button like this :

setTimeout(function(){
  $("#demo").collapse("toggle");
  //console.log("toggle");
}, 200);

$('#mybtn').click(function(){
    $("#demo").collapse("toggle");
});

Another solution it's working perfectly for me:

<div class="container-fluid">
  <button id="mybtn" type="button" class="btn btn-primary"  data-toggle="collapse" href="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
   $(function(){
      $("#demo").collapse("toggle");
   });
</script>

The differences and the use of functions are well explained in the documentation : https://getbootstrap.com/docs/4.6/components/collapse/#via-javascript