Menu
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 .
822
Example Explained. The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
How it works. The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0 .
Generally, we recommend using a button with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button" ). In both cases, the data-bs-toggle="collapse" is required.
Always open Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.
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>
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 .
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
