Bootstrap Collapse not working properly (Hide Not working)

问题

I am using bootstrap collapse functionality is not working properly in our IBM web portal. It working fine on “show” functionality but not working in “Hide” functionality.

<a href="#demo" data-toggle="collapse"><span class=”icon”>Collapsible</span></a>

<div id="demo" class="collapse">
Sample Code 
</div>

I see in console window the “area-expanded” value did not change in our collapse and also did not change class name like “collapsed” and collapse in”.

How to fix it .

回答1:

Your code works! but, It doesn't work properly without jquery.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <a href="#demo" data-toggle="collapse"><span class=”icon”>Collapsible</span></a>

    <div id="demo" class="collapse">
    Sample Code 
    </div>
</div>

</body>
</html>

回答2:

I had run into same trouble , there are many reasons for this , make sure that there are no repeated references in the page to bootstrap libraries , for me removing repeated reference worked .

回答3:

have a look in to below code, it may help you

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<input type="radio" name="group1" value="2" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="panel1">panel 1 <br>
<input type="radio" name="group1" value="3" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" id="panel2"> panel 2
<div class="panel-heading" id="collapse1" class="panel1">
  <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
      you are now in body of panel1
    </div>
  </div>
</div>
<div class="panel-heading" id="panel2" class="collapse">
  <div id="collapseThree" class="panel-collapse collapse">
    <div class="panel-body">
      you are now in body of panel 2
    </div>
  </div>
</div>

回答4:

<head>    
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script src="js/bootstrap.js"></script>
</head>

and in the end of body, you add:

<body>
..............
    <script src="js/jquery-1.11.3.min.js"></script>
</body>

That code is solve for your problem

来源：https://stackoverflow.com/questions/35499243/bootstrap-collapse-not-working-properly-hide-not-working

标签

twitter-bootstrap

twitter-bootstrap-3

websphere-portal