Bootstrap Collapse Button & Collapsible list group not collapsed

Question

Can anyone help with this? I am so beginner with Bootstrap and practicing it from its site but I don't know how to make it collapsed.

I liked collapse.js, jquery.min.js, bootstrap.min.js, transition.js and added the below into html. It shows the hidden div but when clicking the button again, it doesn't collapse the well part back.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

It's the same as Collapsible list group as below. It shows the hidden content after clicking the tab but if I click it again, it doesn't hide the content.

<div class="panel-group" role="tablist"> 
    <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="collapseListGroupHeading1"> 
            <h4 class="panel-title"> 
                <a href="#collapseListGroup1" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseListGroup1"> Collapsible list group </a> </h4> 
        </div> 
        <div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="false" style="height: 0px;"> 
            <ul class="list-group"> 
                <li class="list-group-item">Bootply</li> 
                <li class="list-group-item">One itmus ac facilin</li> 
                <li class="list-group-item">Second eros</li> </ul> 
                <div class="panel-footer">Footer</div>
        </div> 
    </div> 
</div>

Please advise me.

Thank you very much for your time and help.

Answer 1

What versions do you use bootstrap and Jquery.According bootstarp 4.0.0 , you should use jquery 1.9.1. And then you don't need to use collapse.js and transition.js.These are also include in bootstrap.min.js.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="panel-group" role="tablist"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="collapseListGroupHeading1"> <h4 class="panel-title"> <a href="#collapseListGroup1" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseListGroup1"> Collapsible list group </a> </h4> </div> <div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="false" style="height: 0px;"> <ul class="list-group"> <li class="list-group-item">Bootply</li> <li class="list-group-item">One itmus ac facilin</li> <li class="list-group-item">Second eros</li> </ul> <div class="panel-footer">Footer</div> </div> </div> </div>