I'm developing a bootstrap accordion for my website but it's not working in dreamweaver cc and when I publish it in my browser.
Looks like it works on JSFiddle. Here is a link: JSFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#one1" aria-expanded="false" aria-controls="one1" >SHOP LIST</a>
</h4>
</div>
<div id="one1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" >
<div class="panel-body">
<table width="903" border="0">
<tbody>
<tr style="font-size: 10px">
<td width="293" align="center" valign="top" style="font-size: 10px">
<p1>HOKKAIDO<br>GRAN SAC'S 苫小牧 0144-53-5355</p1><br><br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I've been looking for a solution for hours but still can't figure out what's wrong with my accordion.
Here is example please check where is your mistake and still you have doubt please give comment.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<div class="container">
<div class="row">
<article class="content col-sm-12 col-md-12">
<p>Some Text </p>
<br>
<div class="clearfix"></div>
<div class="filter-box accordions-filter">
<div class="panel-group filter-elements" id="accordion">
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<i class="fa fa-circle"></i> Text 1
</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<p>No worries. Just let us know your preferred time slot. We will call you 1 hour before to know your availability. It is possible to reschedule the call; your time is valuable to us.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<i class="fa fa-circle"></i> Text 2
</a>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>We are one call away to help you out. Your emergency is our priority.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<i class="fa fa-circle"></i>Text 3
</a>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Yes. We are working through the week. Your weekends are our peak days as we value your time :)</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
<i class="fa fa-circle"></i>Text 4
</a>
</div>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p>Any small work of around 30 mins is included in this minimum charge. It also includes an inspection and visit to your place so that Zimmber Champ will understand your requirement and will offer best available solution to suit your budget requirement. These visiting charges will be waived off, if you avail of our services. But minimum charges will be applicable in case of no show.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
<i class="fa fa-circle"></i>Text 6
</a>
</div>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
</div>
</div>
</div>
<div class="panel panel-default panel-bg web-design">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
<i class="fa fa-circle"></i> Text 7
</a>
</div>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
Related
I have one accordion where all items have another nested accordion. I'm trying to open the first level of accordions by clicking on the button, without opening nested accordions.
I would like to open all "Groups"-accordions and keep sub-accordions "Count 1" and "Count 2" closed.
How can I do that?
$(document).ready(function() {
// Collapse inner groups:
$('#p-lists').on('hide', function(e) {
// Force a collapse (.hide() doesn't seem to work properly here but is unnecessary anyway):
$(e.target).find('.accordion-body')
.removeClass('in')
.attr('style', '');
});
// Make sure parent groups are also opened:
$('#p-lists').on('show', function(e) {
var $parent = $(e.target).parents('.accordion-body');
// Collapse all siblings:
$parent.parents('.accordion-group')
.prevAll('.accordion-group').find('.accordion-body').collapse('hide')
.nextAll('.accordion-group').find('.accordion-body').collapse('hide');
// Then open THIS parent:
$parent.collapse('show');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<h3>Accordion test</h3>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#p-counts-2">Open counts 2</button>
<div class="accordion" id="p-lists">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-1">
<h5>Group 1</h5>
</a>
</div>
<div id="p-lists-1" class="accordion-body collapse">
<div class="accordion-inner">Body p1</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-2">
<h5>Group 2</h5>
</a>
</div>
<div id="p-lists-2" class="accordion-body collapse">
<div class="accordion-inner">
<h4>Inner accordion</h4>
<!-- Start of inner -->
<div class="accordion" id="p-counts">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-1">
<h5>Counts 1</h5>
</a>
</div>
<div id="p-counts-1" class="accordion-body collapse">
<div class="accordion-inner">Counts p1</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-2">
<h5>Counts 2</h5>
</a>
</div>
<div id="p-counts-2" class="accordion-body collapse">
<div class="accordion-inner">Counts p2</div>
</div>
</div>
</div>
<!-- end of inner -->
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-3">
<h5>Group 3</h5>
</a>
</div>
<div id="p-lists-3" class="accordion-body collapse">
<div class="accordion-inner">Body p3</div>
</div>
</div>
</div>
View on jsFiddle
So,
on your button click, we check if any of the sub-accordions have been opened, if yes, we close them;
on the normal accordion panel click, we wouldn't intentionally close the sub-accordions;
Snippet below:
$(document).ready(function() {
$('#myBtn').click(function() {
($('#group1').hasClass('collapsed')) ? $("a#group1").trigger('click'): '';
($('#group2').hasClass('collapsed')) ? $("a#group2").trigger('click'): '';
($('#group3').hasClass('collapsed')) ? $("a#group3").trigger('click'): '';
$("a.accordion-toggle-inner:not('.collapsed')").each(function() {
$(this).trigger('click');
});
});
});
#group1,
#group2,
#group3 {
color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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.0/js/bootstrap.min.js"></script>
<div class="container">
<button id='myBtn' type="button" class="btn btn-warning" data-toggle="collapse"> open the first level of
accordions by clicking on the button, without opening nested accordions</button>
<div class="accordion">
<a class="accordion-toggle collapsed" data-toggle="collapse" id='group1' href="#p-lists-1">
<h5>Group 1</h5>
</a>
<div id="p-lists-1" class="accordion-body collapse">
Body p1
</div>
<div class="accordion-group">
<a id='group2' class="accordion-toggle collapsed" data-toggle="collapse" href="#p-lists-2">
<h5>Group 2</h5>
</a>
<div id="p-lists-2" class="accordion-body collapse">
<div class="accordion-inner">
<h4>Inner accordion</h4>
<!-- Start of inner -->
<div class="accordion" id="p-counts">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed accordion-toggle-inner" data-toggle="collapse" href="#p-counts-1">
<h5>Counts 1</h5>
</a>
</div>
<div id="p-counts-1" class="accordion-body collapse">
<div class="accordion-inner">Counts p1</div>
</div>
</div>
<a class="accordion-toggle collapsed accordion-toggle-inner" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-2">
<h5>Counts 2</h5>
</a>
<div id="p-counts-2" class="accordion-body collapse">
Counts p2
</div>
</div>
<!-- end of inner -->
</div>
</div>
</div>
<a class="accordion-toggle collapsed" data-toggle="collapse" id='group3' href="#p-lists-3">
<h5>Group 3</h5>
</a>
<div id="p-lists-3" class="accordion-body collapse"> Body p3</div>
</div>
UPDATE: in light of questioner's comment above
Does anybody know how saving panel positions (in localStorage) works with LobiPanel's stateful option in Bootstrap?
The documentation says one must use the stateful option in order to save the position among it's siblings and it will apply them when you reload the browser.
Unfortunately when I do a reload on my site, the panel positions are always back to it's initial state.
It doesn't work, even though LobiPanel successfully adds parent keys and values to the Local Storage, e.g.:
lobipanel_parent_BKlPfuXKuW:"{"panel-2":0,"panel-3":1,"panel-1":2}"
lobipanel_parent_KyCQKms0ir:"{"panel-1":0,"panel-2":1,"panel-3":2}"
lobipanel_parent_lDSURxUHh2:"{"LwmEvZSUiF":0,"vpT9FMcurP":1,"awfVUjhLzE":2}"
lobipanel_parent_lk5lsV9Y3k:"{"panel-6":0,"panel-5":1,"panel-4":2}"
So the positions are actually saved to Local Storage but are somehow not applied when reloading.
This is how my HTML code (Bootstrap v3.3.5) looks like:
<div id="lobipanel-multiple lobipanel">
<h3>Multiple panels with drag & drop</h3>
<p>Drag panels by clicking on the headers</p>
<div class="bs-example">
<div class="row">
<div class="col-md-6 panel">
<div class="panel panel-default" data-index="0" data-inner-id="panel-1">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 1</h4>
</div>
</div>
<div class="panel-body">
Panel body 1
</div>
</div>
<div class="panel panel-warning" data-index="1" data-inner-id="panel-2">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 2</h4>
</div>
</div>
<div class="panel-body">
Panel body 2
</div>
</div>
<div class="panel panel-danger" data-index="2" data-inner-id="panel-3">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 3</h4>
</div>
</div>
<div class="panel-body">
Panel body 3
</div>
</div>
</div>
<div class="col-md-6 panel">
<div class="panel panel-success" data-index="3" data-inner-id="panel-4">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 4</h4>
</div>
</div>
<div class="panel-body">
Panel body 4
</div>
</div>
<div class="panel panel-info" data-index="4" data-inner-id="panel-5">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 5</h4>
</div>
</div>
<div class="panel-body">
Panel body 5
</div>
</div>
<div class="panel panel-danger" data-index="5" data-inner-id="panel-6">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 6</h4>
</div>
</div>
<div class="panel-body">
Panel body 6
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('.panel').lobiPanel({
sortable: true,
stateful: true
});
});
</script>
In the documentation there is example code for the stateful function but only for a single panel and not positions. So I still don't know how to address the CSS properly.
<!-- Stateful -->
<div>
<h3>Stateful. <small>Saves its state in localStorage</small></h3>
<div class="bs-example">
<div id="lobipanel-stateful" class="panel panel-default" data-inner-id="lobipanel-stateful">
<div class="panel-heading">
<div class="panel-title">
Panel title
</div>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#lobipanel-stateful').lobiPanel({
stateful: true
});
});
</script>
Thank you in advance.
I am trying to Add bootstrap Accordion to my project but its not working.... what is the problem with my code i have added below with JavaScript.
I am also including following files in my project.
Thanks in Advance.
Regards.
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-collapse-down').removeClass('.glyphicon-collapse-down')
}).on('hidden.bs.collapse', function () {
$(this).parent().find('..glyphicon-collapse-up').removeClass('.glyphicon-collapse-up').addClass('.glyphicon-collapse-down');
});
});
</script>
You can look for the previous element and find the span with a class of .glyphicon.
Then simply add or remove the up and down classes.
Here is an example.
$('.collapse')
.on('show.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-down')
.addClass('glyphicon-collapse-up')
})
.on('hide.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-up')
.addClass('glyphicon-collapse-down')
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In order to change the accordion icons I would suggest to use:
.toggleClass() in order to change icons from down to up and vice versa,
show.bs.collapse event
hide.bs.collapse event
$(document).ready(function () {
$('.collapse').on('show.bs.collapse hide.bs.collapse', function () {
$(this).closest('.panel').find('.panel-heading .glyphicon').toggleClass('glyphicon-collapse-down glyphicon-collapse-up')
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Refer to this link. http://jsfiddle.net/panchroma/3gYa3/
Bootstrap accordion using only CSS
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
https://fiddle.jshell.net/8v72rtxb/
I have the following code.
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample">
Studies
</a>
<div class="collapse" id="studies-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample">
Research
</a>
<div class="collapse" id="research-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>
I have no idea why data-parent doesn't work though. Expand one collapse div doesn't close the other collapse. I tried to copy the code from the example of bootstrap, but it still doesn't work.
Also in my project, I include jquery.js before bootstrap.min.js. I have checked some other questions, they said that bootstrap.min.js might have been included twice. But should that be the case?
Thanks for reading!
I figured a workaround for this. Even without using the data-parent attribute.
https://fiddle.jshell.net/zyd1vL4o/
$(document).ready(function(){
$('.collapse').on('show.bs.collapse', function (e) {
$('.collapse').collapse("hide")
})
})
Once go through this jsfiddle
And here is html code,
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Studies
</a>
</h5>
</div>
<div id="collapseOne" class="collapse " role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div id="studies-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Research
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div id="research-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Use:
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed" data-target="#studies-collapse" href="#studies-collapse" aria-expanded="false" aria-controls="studies-collapse">
Studies
</a>
<div class="collapse" id="studies-collapse" data-parent="#menu">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed" data-target="#research-collapse" href="#research-collapse" aria-expanded="false" aria-controls="research-collapse">
Research
</a>
<div class="collapse" id="research-collapse" data-parent="#menu">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>
import 'bootstrap/js/dist/collapse';
Include this in your file and the collapse should work.
If its not closing, then you might not be properly linking to to your bootstrap js. You shouldn't need to add anything extra.
check for the following js files:
bootstrap.min.js
bootstrap.bundle.min.js
If you're creating a bootstrap theme then in the functions do this:
wp_register_script( 'write your theme name here', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
I am using bootstrap accordion in my code. On click on every list I will display Data and Icon will change.
<i class="fa fa-plus-square"></i>
will change to
<i class="fa fa-minus-square"></i>
My code:-
<div class="priority-lists">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindDistrictMeteres">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind District Meters
</h2>
</div>
<div id="waterMindDistrictMeteres" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindPressurePoints">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind Pressure Points
</h2>
</div>
<div id="waterMindPressurePoints" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#waterMindServicePoints">
<h2 class="panel-title accordion-toggle">
<i class="fa fa-minus-square"></i>
WaterMind Service Points
</h2>
</div>
<div id="waterMindServicePoints" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div id="servicePointsGrid" watermind-priority-lists kendo-grid k-options="watermindDetailGridOptions" k-rebind="watermindDetailGridOptions"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried to use some code:
My jsFiddle code
I will see icon are not working properly. I am looking for solution in CSS or JavaScript or jQuery.
You have to add .collapsed to your panel-headings! The first time .collapsed is not on that element, but bootstrap updated it on a click.
It does work fine by me now.
Updated fiddle
Please check on this link
Js Fiddle
You must add a class "collapsed" next to "panel-heading". your problem will be solved
You should init your icons with : fa-plus-square, not fa-minus-square.