Bootstrap Collapse not working properly (Hide Not working)

Asked 19/2, 2016 at 7:1 Answered 19/11, 2021 at 15:56

Solved twitter-bootstrap twitter-bootstrap-3 websphere-portal

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 .

Rodin answered 19/2, 2016 at 7:1 Comment(1)

check if you have repeated jquery files. – Dynode 19/2, 2016 at 7:20

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>

Riffe answered 19/2, 2016 at 7:13 Comment(0)

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 .

Obsessive answered 19/2, 2016 at 7:17 Comment(3)

what you mean repeated reference? – Rodin 19/2, 2016 at 7:24

I was using Asp.net and it adds bootstrap reference by itself , like how we add link to a style sheet , VS adds on it's own , and i had added link to bootstrap stylesheet and js files again in the same page , for me removing duplicate reference to js and css files worked . – Obsessive 19/2, 2016 at 7:44

i was linking both bootstrap.bundle.min.js at top and bootstrap.min.js at bottom as provided in bootstrap docs and according this solution removing one helped me !! – Durant 9/3 at 13:23

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>

Riffe answered 19/2, 2016 at 7:13 Comment(0)

I have the same problem with Bootstrap 5. A workaround in my case is to add one of the Javascript functions handling the "hide" event, and have it returning false.

e.g.

$("#searchMapDiv").on('hide.bs.collapse',
                    function()
                    {                       
                            console.log("hide");
                            return false;
                                                
                    }
                );

Funnily enough, triggering a JavaScript error in this function also hides the block...

 $("#searchMapDiv").on('hide.bs.collapse',
                        function()
                        {                       
                                $("#searchMapDiv").badcollapse();
                                                    
                        }
                    );

Marchall answered 19/11, 2021 at 15:56 Comment(0)

-1

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>

Dynode answered 19/2, 2016 at 7:7 Comment(1)

There is nothing to say what specifically about this code helps. – Lehet 21/11, 2020 at 15:31

-2

<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

Infusionism answered 30/3, 2017 at 15:5 Comment(0)

Recommended topics

Hot tags