My codes is not running properly as I can't navigate through the categories or collapse or uncollapse the accordion. The page is only displays as collapsed view and I was unable to uncollapse the accordion it.
I am current using bootstrap 3 framework with asp.net.
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" >
$(document).ready(function () {
$('.collapse').on('show.bs.collapse', function () {
var id = $(this).attr('id');
$('a[href="#' + id + '"]').closest('.panel-heading').addClass('active-faq');
$('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-minus"></i>');
});
$('.collapse').on('hide.bs.collapse', function () {
var id = $(this).attr('id');
$('a[href="#' + id + '"]').closest('.panel-heading').removeClass('active-faq');
$('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-plus"></i>');
});
});
</script>
<div class="container">
<div class="row">
<!--NAV Tabs catagory-->
<ul class="nav nav-tabs faq-cat-tabs" role="tablist">
<li class="active"><i class="fa fa-life-saver pr-10"></i> General</li>
<li><i class="fa fa-star pr-10"></i> Popular Topics</li>
</ul>
<!-- Tab Panels-->
<div class="tab-content faq-cat-content">
<div class="tab-pane active in fade" id="faq-cat-1">
<div class="panel-group" id="accordion-cat-1">
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-1">
<h4 class="panel-title">
1. Why should I hire an interior designer?
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
</h4>
</a>
</div>
<div id="faq-cat-1-sub-1" class="panel-collapse panel">
<div class="panel-body">
A professional interior designer will be able to offer advice and sugguestions based on his expertise to help you create your ideal conceptual design, hassle-free
</div>
</div>
</div>
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-2">
<h4 class="panel-title">
2. What are the procedures involved in the hiring of your interior designers?
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
</h4>
</a>
</div>
<div id="faq-cat-1-sub-2" class="panel-collapse panel">
<div class="panel-body">
Simply create an account from our website and you are all set to consult the interior designer of your choice to embark on an unforgettable journey with Impression Design Firm.
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="faq-cat-2">
<div class="panel-group" id="accordion-cat-2">
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-1">
<h4 class="panel-title">
3. How can I make my payment?
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
</h4>
</a>
</div>
<div id="faq-cat-2-sub-1" class="panel-collapse collapse">
<div class="panel-body">
Impression Design Firm would only allow cheque payments for the benefit and convenience of both parties for project payments, and credit cards for furniture purchases.
</div>
</div>
</div>
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-2">
<h4 class="panel-title">
4. Do you provide free delivery?
<span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
</h4>
</a>
</div>
<div id="faq-cat-2-sub-2" class="panel panel-collapse">
<div class="panel-body">
Impression Design Firm provides free delivery for any furniture and supplies purchased, which will be sent directly to your doorstep!
</div>
</div>
</div>
<div class="panel panel-default panel-faq">
</div>
</div>
</div>
</div>
</div>
</div>
Related
Live version here:
http://www.bootply.com/7aYZsAKgSy
I have two of these on my page that want them to collapse or expand independent of each other , I do not want one of them to have affect on status of other ones.
So I have something like this:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL1">
<span class="glyphicon glyphicon-chevron-down"></span>
PANEL 1
</a>
</h4>
</div>
<div id="PANEL1" class="panel-collapse collapse in">
<div>
THERE IS A FORM HERE THAT IS THE STUFF IN THIS PANEL
</div>
</div>
</div>
</div>
</div>
and then one more under it, very similar copy paste, just the ID of inner DIV is different:
I have two of these on my page that want them to collapse or expand independent of each other , I do not want one of them to have affect on status of other ones.
So I have something like this:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL2">
<span class="glyphicon glyphicon-chevron-down"></span>
PANEL 1
</a>
</h4>
</div>
<div id="PANEL2" class="panel-collapse collapse in">
<div>
THERE IS another FORM HERE THAT IS THE STUFF IN THIS PANEL
</div>
</div>
</div>
</div>
</div>
and then my JavaScript that is this:
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
So sometimes it works, sometimes it does not. When both of them are open and I first close the second one, it also closes the first one.
Is that what you want?
http://www.bootply.com/MiQbLj7uIA
I just changed the id of the second accordion and its data-parent value.
I'm new to jquery and I'm trying to figure out how to traverse the dom in order to toggle the collapse option on panel footers? Any pointers?
<div id="colDealDiv" class="row col-md-8 col-md-offset-2 colDiv">
<div class="panel panel-default">
<div class="panel-heading">
<p>Retail & Services</p></div>
<div class="panel-body">
<div id="thumbnailDealDiv" class="thumbnail">
<div id="captionDealDiv" class="caption">
<p>$35 -- 'Best of NY': Painting Parties at City Bars, Reg. $65</p>
<p>Paint Nite</p>
<p>New York</p>
<p>NY</p><img src="https://api.sqoot.com/v2/deals/4344628/image?api_key=demo" class="img-thumbnail">
<button class="btn btn-info" data-toggle="collapse"></button>
</div>
</div>
</div>
<div class="panel-footer collapse">
<p>46% off at Paint Nite</p>
<p>35</p>
<p>2016-05-24T13:00:00Z</p>
</div>
</div>
$(".panel").on("click", ".btn-info", function() {
$(this).parent().next(".panel-footer").collapse("toggle");
});
Below is the javascript & HTML code for Bootstrap accordion, that I am using in my Project.
Issue is: If user is on the 2nd Tab i.e., RELATED SOPs and then opens any of the nested tab inside it, and then copy the URL from the address bar and paste it to any another browser or another tab of same browser, then always nested tab of 1st Tab i.e., QESH MANUAL is opened in place of 2nd Tab & its nested tab (last opened by user).
EDIT
<script type="text/javascript">
$(document).ready(function () {
$("ul#tab li:first").addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:first").show();
$("ul#tab li").click(function (e) {
var index = $(this).index();
$("ul#tab li").removeClass("aktif");
$(this).addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:eq(" + index + ")").show();
return false
});
$(".tabv2").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv2-"]').hide();
$('.' + thisId).show();
$('.tabv2').removeClass('tabv2-active');
$(this).addClass('tabv2-active');
});
$(".tabv2plain").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv2plain-"]').hide();
$('.' + thisId).show();
$('.tabv2plain').removeClass('tabv2plain-active');
$(this).addClass('tabv2plain-active');
});
$(".tabv3plain").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv3plain-"]').hide();
$('.' + thisId).show();
$('.tabv3plain').removeClass('tabv3plain-active');
$(this).addClass('tabv3plain-active');
});
});
</script>
<body>
<script>
function myFunction() {
window.location.hash = "#One";
//var a = "QESH MANUAL" + location.hash;
//document.getElementById("One").innerHTML = a;
}
function myFunction2() {
window.location.hash = "#Two";
}
function myFunction3() {
window.location.hash = "#collapseOne";
}
function myFunction4() {
window.location.hash = "#collapseOneOne";
}
function myFunction5() {
window.location.hash = "#collapseOneOne1";
}
function myFunction6() {
window.location.hash = "#collapseOneTwo";
}
function myFunction7() {
window.location.hash = "#collapseOneTwo1";
}
function myFunction8() {
window.location.hash = "#collapseOneTwo2";
}
function myFunction9() {
window.location.hash = "#collapseOneTwo3";
}
function myFunction10() {
window.location.hash = "#collapseOneTwo4";
}
function myFunction11() {
window.location.hash = "#collapseOneTwo5";
}
function myFunction12() {
window.location.hash = "#collapseOneTwo6";
}
function myFunction13() {
window.location.hash = "#collapseOneThree";
}
function myFunction14() {
window.location.hash = "#collapseOneThree1";
}
function myFunction15() {
window.location.hash = "#collapseOneFour";
}
function myFunction16() {
window.location.hash = "#collapseOneFour1";
}
function myFunction17() {
window.location.hash = "#collapseTwo";
}
function myFunction18() {
window.location.hash = "#collapseTwo1";
}
function myFunction19() {
window.location.hash = "#collapseThree";
}
function myFunction20() {
window.location.hash = "#collapseThree1";
}
function myFunction21() {
window.location.hash = "#collapseFour";
}
function myFunction22() {
window.location.hash = "#collapseFour1";
}
//2nd Tab Menus
function myFunction23() {
window.location.hash = "#collapseFive";
}
function myFunction24() {
window.location.hash = "#collapseFive1";
}
</script>
<div>
<div class="row" style="padding-top:5px">
<div class="col-md-12">
<ul id="tab">
<li class="">
<a onclick="myFunction()" href="#One">QESH MANUAL</a>
</li>
<li style="margin-left:3px;" class="aktif">
<a onclick="myFunction2()" href="#Two">RELATED SOPs</a>
</li>
</ul>
</div>
</div>
<div class="row" style="padding-top:5px">
<div class="tab_icerik" style="display: block;">
<div class="col-md-4">
<span style="display:block;">
<div id="accordionA1" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction3()" href="#collapseOne"> CONSTRUCTION</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- SECOND LEVEL ACCORDION START -->
<div id="accordionA2" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction4()" href="#collapseOneOne">QESH MANUAL</a>
</h4>
</div>
<div id="collapseOneOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group row clear" id="tabsv2plain">
<div class="tabv2plain tabv2plain-active" id="tabv2plain-1">
<a onclick="myFunction5()" href="#collapseOneOne1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction6()" href="#collapseOneTwo">PROCEDURES MANUALS</a>
</h4>
</div>
<div id="collapseOneTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div1">
<div class="tabv2plain" id="tabv2plain-2">
<a onclick="myFunction7()" href="#collapseOneTwo1">Tender & Contract Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-3">
<a onclick="myFunction8()" href="#collapseOneTwo2">Procurement Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-4">
<a onclick="myFunction9()" href="#collapseOneTwo3">Pre-Construction & Planning Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-5">
<a onclick="myFunction10()" href="#collapseOneTwo4">Project Implementation & Management Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-6">
<a onclick="myFunction11()" href="#collapseOneTwo5">Post-Construction Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-7">
<a onclick="myFunction12()" href="#collapseOneTwo6">Management System Administration Procedure Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction13()" href="#collapseOneThree">QESH POLICY</a>
</h4>
</div>
<div id="collapseOneThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div2">
<div class="tabv2plain" id="tabv2plain-8">
<a onclick="myFunction14()" href="#collapseOneThree1">QESH Policy</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction15()" href="#collapseOneFour">QESH OBJECTIVE</a>
</h4>
</div>
<div id="collapseOneFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div3">
<div class="tabv2plain" id="tabv2plain-9">
<a onclick="myFunction16()" href="#collapseOneFour1">QESH Objective</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECOND LEVEL ACCORDION END -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction17()" href="#collapseTwo">SUNWAY ENGINEERING </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div4">
<div class="tabv2plain" id="tabv2plain-10">
<a onclick="myFunction18()" href="#collapseTwo1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction19()" href="#collapseThree">SUNWAY GEOTECHNICS </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div5">
<div class="tabv2plain" id="tabv2plain-11">
<a onclick="myFunction20()" href="#collapseThree1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction21()" href="#collapseFour">SUNWAY CONCRETE PRODUCTS </a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div6">
<div class="tabv2plain" id="tabv2plain-12">
<a onclick="myFunction22()" href="#collapseFour1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div class="col-md-8">
<span style="display:block; padding:10px;">
<div class="tabplaincontent">
<div class="tabv2plain-1" style="display:block;">
One Content
</div>
<div class="tabv2plain-2" style="display:none;">
Two Content
</div>
<div class="tabv2plain-3" style="display:none;">
Three Content
</div>
<div class="tabv2plain-4" style="display:none;">
Four Content
</div>
<div class="tabv2plain-5" style="display:none;">
Five Content
</div>
<div class="tabv2plain-6" style="display:none;">
Six Content
</div>
<div class="tabv2plain-7" style="display:none;">
Seven Content
</div>
<div class="tabv2plain-8" style="display:none;">
Eight Content
</div>
<div class="tabv2plain-9" style="display:none;">
Nine Content
</div>
<div class="tabv2plain-10" style="display:none;">
Ten Content
</div>
<div class="tabv2plain-11" style="display:none;">
Eleven Content
</div>
<div class="tabv2plain-12" style="display:none;">
Twelve Content
</div>
</div>
</span>
</div>
</div>
<div class="tab_icerik" style="display: none;">
<div class="col-md-4">
<span style="display:block;">
<div id="accordionB1" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionB1" onclick="myFunction23()" href="#collapseFive">FINANCE & ADMIN</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group row clear" id="tabsv3plain">
<div class="tabv3plain" id="tabv3plain-1">
<a onclick="myFunction24()" href="#collapseFive1">General</a>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div class="col-md-8">
<span style="display:block; padding:10px;">
<div class="tabplaincontent">
<div class="tabv3plain-1" style="display:block;">
Thirteen Content
</div>
<div class="tabv3plain-2" style="display:none;">
Fourteen Content
</div>
<div class="tabv3plain-3" style="display:none;">
Fifteen Content
</div>
<div class="tabv3plain-4" style="display:none;">
Sixteen Content
</div>
</div>
</span>
</div>
</div>
</div>
</div>
For above requirement, I added window.location.hash to uniquely identify each Accordion tab in URL.
Now, when I click on any of the Accordion tab, I can see a unique name (based on selected tab) with hash at the end in URL
Example:
localhost:49963/Test.aspx#collapseThree1
Again, when I copy the URL (which include a unique name for each selected tab) always the 1st Accordion tab is opened i.e., CONSTRUCTION --> Quesh Manual --> Quesh Manual ; in place of last selected tab by user. Still the same issue persist.
Any help will be much appreciated
I have an accordion to hide blog posts in a webpage. I have a downwards arrow which I want to rotate to an upwards arrow when a blog post (accordion section) has been opened. These should be independent of other arrows attached to other posts obviously.
I am using bootstrap framework as a base. I tried following the instructions here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h , along with what I already know/have used to try to add rotation. My problem is that, as I'm not using a button (the whole blog post is clickable to expand and collapse it), I can't work out what I need to put in the javascript where the question marks are.
(adding a data-target attribute to the tag breaks the expandability of the post).
$(" ??? ").on("hide.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
$(" ??? ").on("show.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="blog" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 25th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body" >
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes
This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
<a class="blog collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 26th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes. This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
</div>
You can attach the eventHandler on any Element, that is one of the parent Elements of .collapse. This is because the Event is triggered on the .collapse Element and bubbles all the way uppward. You can read more about event bubbling here.
You could, for example, attach the eventHandler to every Element with class "blog" as I did to solve your problem.
Relevant jsFiddle
$(".blog").each(function () {
$(this).on("hide.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
$(this).on("show.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
});
Note the .each at the beginning. This attaches a different eventHandler to every Element matching the selector.
Now you can search the icon to be rotated in this Element --> $(this).find(
This will only find the one arrow inside the clicked blog element.
A very detailed explanation can also be found in this post.
I have 5 accordions and data under each accordion but wat i need is that the all the accordion has to be closed first and when i click the accordion then i need it to be opened.
<div class="panel panel-default" style=" background: rgba(0,0,0,0.1)">
<div class="panel-heading" style="background:rgba(0,0,0,0.7);">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<h4 class="panel-title">SUPPLIERS <b class="closed"></b>
</h4>
</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p class="title"> > BP</p>
<p class="title"> > CHEVERON </p>
<p class="title"> > CITGO </p>
<p class="title"> > EXOON </p>
</div>
</div>
This is the code sample for the first accordion is there anyway to close the first accordion and open it only on click?
Your need to remove class in from accordion collapse..
<div id="collapse1" class="accordion-body collapse">