I have a CSS-solution for your issue. And I've noticed several problems in your code.
1) Several problems
Your current code creates a set of accordions with the same id="accordion2"
. It's wrong. The id
must be unique.
Each accordion contains only one panel. This is strange. Accordions have been invented to manage multiple panels.
You've replaced Bootstrap classes. For example, your code uses .accordion-group
and .accordion-heading
instead of .panel-group
and .panel-heading
. I need to see your code in order to understand what are the differences between them.
2) How to toggle icons using CSS
Let's start with the standard Accordion example.
You can add FontAwesome icons as a content of the :after
pseudo-element:
.panel-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
}
Bootstrap uses the aria-expanded
attribute for the control element.
The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.
So you can toggle icons by CSS:
.panel-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}
Please check the demo. Is it what you want to achieve?
https://jsfiddle.net/glebkema/1wx4ubvc/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
.panel-title > a {
display: block;
position: relative;
}
.panel-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
Item 1
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
<div class="panel-body">
Text 1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
Item 2
</a>
</h4>
</div>
<div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
<div class="panel-body">
Text 2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Item 3
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
<div class="panel-body">
Text 3
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
3) Try this code
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
foreach (var i in footerPage.StaticPagePersons)
{
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="[email protected]">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#[email protected]" aria-expanded="false" aria-controls="[email protected]">
@Html.Raw(@i.Type)
</a>
</h4>
</div>
<div id="[email protected]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="[email protected]">
<div class="panel-body">
<img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
<h1>@Html.Raw(@i.Name)</h1>
<h3>@Html.Raw(@i.Title)</h3>
<br />
@Html.Raw(@i.BioDetail)
</div>
</div>
</div>
}
</div>
And use this CSS:
.panel-title > a {
display: block;
position: relative;
}
.panel-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}
id="accordion2"
? Does each accordion contain only one panel? Can you show the HTML-code that you get as a result?