Develop Reference

How to open all top level accordions but keep nested accordions closed?

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

JQuery filtering a website onClick to remove certain divs or sections

I have a blog style website that I've placed a dropdown button at top of for the purpose of filtering the content. Each blog post will reside in section tags.
When user clicks on menu item it will trigger click event. I'm trying to save the href which the code seems to do fine.
Then i was hoping to iterate each a tag with the class of "label".
With each one that is found it should check the text and compare to value from dropdown box. If it matches keep the content. If not detach it. I thought detach was the best method since I would need to put it back on refresh and/or if user clicks on another selection in the dropdown.
Here's what I tried:
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" id="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" id="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" id="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" id="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive" />
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
JQuery:
<script>
$("a[role='sortmenuitem']").bind("click", function() {
var value = $(this).attr( 'id' );
$("a.label").each(function() {
if (this.text('value')) {
this.replace();
}
else {
this.detach();
}
});
});
</script>
If there is a better approach all together, I am all ears.
I thought about giving each blog section a class matching its category, and then using CSS to hide the element. If I am in the right ballpark please let me know.
Furthermore, once we hide the section not matching the dropdown menu item that is selected I'd need to put it back if another element is selected.
I am new (obviously) to JQuery. Any "dumbed down" explanation would be greatly appreciated!

I assume you want to hide/show the blog-post according to the current dropdown selection.
For the first, you need to change this line:
$("a.label")
to:
$(".blog-post .label")
because the label is associated to the span element under the blog-post section.
In order to test a value against a text you need to change this line:
this.text('value')
with:
$(this).text()
In order to hide/show the section inside the each loop you have to search for the closest blog-post parent section.
I added e.preventDefault() inside the click to stop navigation.
Moreover, as reported in the comment (Khalid T), instead to use bind you have to use on because its usage is deprecated.
So the snippet is:
$("a[role='sortmenuitem']").on("click", function(e) {
e.preventDefault();
var value = $(this).attr( 'href' );
$(".blog-post .label").each(function() {
$(this).closest('.blog-post').toggle($(this).text() == value);
});
});
<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 blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" href="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" href="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" href="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" href="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive"/>
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>

How to fetch content from panel to modal using jquery

I've made a profile page on which user's posts are displayed, user can perform function delete or edit post.But,
when i click on edit post on any of my post ,only content of first post is fetched in the modal.
my js code:
$('.dropdown-menu').find('.edit').on('click', function(e) {
e.preventDefault();
var postbody = $('#fetch').find('p').text();
$('#post-body').val(postbody);
$('#edit-modal').modal();
});
my view code:
#foreach($posts as $post) #if(Auth::user()== $post->user)
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<section class="col-md-2 col-xs-2">
<img id="imagesize2" src="images/g.jpg" class="img-circle" data- action="zoom" />
</section>
<section class="col-md-5 col-xs-offset-1 col-xs-5">
<a id="alink13" href=""><h5 id="alink14">{{$post->user->firstname}}</h5> </a>
<p>on {{$post->created_at}}</p>
</section>
<section class="col-md-offset-3 col-md-2 col-xs-4 col-lg-offset-1">
<div class="btn-group">
<button id="btnclr4" type="button" class="btn btn-default dropdown- toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span>
</button>
#if(Auth::user()==$post->user)
<ul id="remove" class="dropdown-menu" role="menu">
<a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
<li role="presentation">Remove This Post</li>
</a>
<a href="" class="edit">
<li role="presentation">Edit This Post</li>
</a>
</ul>
#endif
</section>
</div>
</div>
<div class="panel-content">
<div class="row" id="fetch">
<section class="col-md-12">
<p>{{$post->body}}</p>
</section>
</div>
</div>

Bootstrap accordion not collapsing

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>

bootstrap collapse breaks when clicking on elements

I'm not sure what is wrong, since this is pretty much exactly like in the bootstrap website
Once clicked on the first element (List A), it pretty much breaks. Other elements are ok, but once list A is clicked it breaks.
<div class="accordion" id="notification_types">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#a">List A</a>
</div>
<div class="accordion-body collapse" id="a" style="height: 0px;">
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#b">List B</a>
</div>
<div class="accordion-body collapse" id="b" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a123">
<a data-method="get" data-remote="true" href="/123">123</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#c">List C</a>
</div>
<div class="accordion-body collapse" id="c" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a456">
<a data-method="get" data-remote="true" href="/456">456</a>
</div>
</div>
</div>
</div>
I've made an example in jsfiddle - http://jsfiddle.net/uycBa/157/
When testing, press List B or C before, since pressing on A will break the whole thing...
What is wrong here?

Adding div to first accordion body worked.Could not find reason for this.
<div class="accordion" id="notification_types">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#a">List A</a>
</div>
<div class="accordion-body collapse" id="a" style="height: 0px;">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#b">List B</a>
</div>
<div class="accordion-body collapse" id="b" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a123">
<a data-method="get" data-remote="true" href="/123">123</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#c">List C</a>
</div>
<div class="accordion-body collapse" id="c" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a456">
<a data-method="get" data-remote="true" href="/456">456</a>
</div>
</div>
</div>
</div>

Known error : https://github.com/twitter/bootstrap/issues/5849
The transition is blocking the plugin because your first collapsible has no height :
The plugin is in the transitioning state, and is waiting for the transition to end, but since the height of the element is 0, the transition never started and will not end (I think so). The plugin doesn't do anything when it's in this state.
You can see it if you deactivate the transition : http://jsfiddle.net/Sherbrow/uycBa/158/
You could stop this by calling preventDefault() on the show event :
$('.accordion-body.empty').on('show', function(event) {
event.preventDefault();
});
(empty is also added in the markup to locate the empty accordion body)
Demo : http://jsfiddle.net/Sherbrow/uycBa/159/