Font Awesome icons within a nested accordion created using Bootstrap

Question

Font Awesome icons within a nested accordion created using Bootstrap

I have a bootstrap accordion with 3 levels of nesting that is functioning correctly, but I want to make a change in the panel-heading div where I can use a font-awesome icon fa fa-chevron-down when the accordion is open (without affecting the nested accordions) and fa fa-chevron-right when the accordion is closed. Here is the code snippet I am using to change the icon:

$('div.panel-collapse.collapse').on('shown.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down");
  $(this).parent().find('.panel-heading').css('background', '#0271BC');
}).on('hidden.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right");
  $(this).parent().find('.panel-heading').css('background', '#02A4EF');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">

<a href="#aspnetcore" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#accordion">
... (Accordion HTML structure continues)

<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>

However, this code also changes the icons of nested accordions that are not currently open. If you have any suggestions on how to improve this issue, please let me know.

jquery html css twitter-bootstrap accordion

Answer 1

Answer №1

In my approach, I find it effective to utilize examples from the Bootstrap documentation and manipulate icons using CSS toggle.

I also incorporated Font Awesome icons as part of the content within the :after pseudo-element.

Bootstrap 4

Borrowing concepts from the Accordion example.

To see the end result: CodePen

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.mb-0 > a {
  display: block;
  position: relative;
}
.mb-0 > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}</pre>

<footer>
    Scripts:
    <ul>
        <li><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></li>
        <li><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script></li>
    </ul>
</footer>

<hr>

<h2>Bootstrap 3</h2>

<p>Following the guidelines outlined in the <a href="https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion" rel="nofollow noreferrer">Accordion example</a>.</p>

<p>For visual representation: <a href="https://codepen.io/glebkema/pen/xYPyeq" rel="nofollow noreferrer">CodePen</a>  •  <a href="https://jsfiddle.net/glebkema/1wx4ubvc/" rel="nofollow noreferrer">JSFiddle</a></p>

<pre class="snippet-code-css lang-css"><code>@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/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 */
}

Answer 2

In my approach, I find it effective to utilize examples from the Bootstrap documentation and manipulate icons using CSS toggle.

I also incorporated Font Awesome icons as part of the content within the :after pseudo-element.

Bootstrap 4

Borrowing concepts from the Accordion example.

To see the end result: CodePen

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.mb-0 > a {
  display: block;
  position: relative;
}
.mb-0 > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}</pre>

<footer>
    Scripts:
    <ul>
        <li><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></li>
        <li><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script></li>
    </ul>
</footer>

<hr>

<h2>Bootstrap 3</h2>

<p>Following the guidelines outlined in the <a href="https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion" rel="nofollow noreferrer">Accordion example</a>.</p>

<p>For visual representation: <a href="https://codepen.io/glebkema/pen/xYPyeq" rel="nofollow noreferrer">CodePen</a>  •  <a href="https://jsfiddle.net/glebkema/1wx4ubvc/" rel="nofollow noreferrer">JSFiddle</a></p>

<pre class="snippet-code-css lang-css"><code>@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/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 */
}

Answer 3

Answer №2

Stumbled upon an existing jsFiddle: http://jsfiddle.net/zessx/r6eaw/12/ and after a bit of copying and pasting, created one with a nested accordion: http://jsfiddle.net/R6EAW/3979/

An issue in the code is the nesting of divs within anchor (<a/>) tags, which is not allowed.

Answer 4

Stumbled upon an existing jsFiddle: http://jsfiddle.net/zessx/r6eaw/12/ and after a bit of copying and pasting, created one with a nested accordion: http://jsfiddle.net/R6EAW/3979/

An issue in the code is the nesting of divs within anchor (<a/>) tags, which is not allowed.

Answer 5

Answer №3

Here is a demonstration of how to initially display icons correctly using jQuery and Bootstrap.

I hope you find this example useful!

$(function(){
 $('.panel-title a[data-toggle="collapse"]').on('click', this, function(event) {
  
  $('.panel-collapse').on('show.bs.collapse', function () {
   $(this).siblings('.panel-heading').find('i').removeClass('fa-plus-circle').addClass('fa-minus-circle');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
   $(this).siblings('.panel-heading').find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
  });

 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<!-- Panel -->
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="item001">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail001" aria-expanded="true" aria-controls="detail001">
      <div class="title">Title 1 <i class="fa fa-minus-circle" aria-hidden="true"></i></div>
    </a>
    </h4>
  </div>
  <div id="detail001" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="item001">
    <div class="panel-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>
<!--/ Panel -->

<!-- Panel -->
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="item002">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail002" aria-expanded="true" aria-controls="detail002">
      <div class="title">Title 2 <i class="fa fa-plus-circle" aria-hidden="true"></i></div>
    </a>
    </h4>
  </div>
  <div id="detail002" class="panel-collapse collapse" role="tabpanel" aria-labelledby="item002">
    <div class="panel-body">
      Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>
<!--/ Panel -->

</div>

Answer 6

Here is a demonstration of how to initially display icons correctly using jQuery and Bootstrap.

I hope you find this example useful!

$(function(){
 $('.panel-title a[data-toggle="collapse"]').on('click', this, function(event) {
  
  $('.panel-collapse').on('show.bs.collapse', function () {
   $(this).siblings('.panel-heading').find('i').removeClass('fa-plus-circle').addClass('fa-minus-circle');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
   $(this).siblings('.panel-heading').find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
  });

 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<!-- Panel -->
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="item001">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail001" aria-expanded="true" aria-controls="detail001">
      <div class="title">Title 1 <i class="fa fa-minus-circle" aria-hidden="true"></i></div>
    </a>
    </h4>
  </div>
  <div id="detail001" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="item001">
    <div class="panel-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>
<!--/ Panel -->

<!-- Panel -->
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="item002">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail002" aria-expanded="true" aria-controls="detail002">
      <div class="title">Title 2 <i class="fa fa-plus-circle" aria-hidden="true"></i></div>
    </a>
    </h4>
  </div>
  <div id="detail002" class="panel-collapse collapse" role="tabpanel" aria-labelledby="item002">
    <div class="panel-body">
      Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>
<!--/ Panel -->

</div>

Font Awesome icons within a nested accordion created using Bootstrap

Answer №1

Bootstrap 4

Answer №2

Answer №3

Similar questions

What is the best way to fetch and convert information from an API to display on a website?

How can I retrieve my cropped image using Symfony2 Cropit?

Adjusting the gap between TableRows in Material-UI

Create a custom slider using jQuery that pulls in real-time data for a dynamic user

Issue with alignment on the printed version of an HTML document

A Step-by-Step Guide on Sending Response to ajaxError Callback in Perl

Most effective method for automatically scrolling down upon page load

Hide, show, toggle, or empty elements using jQuery

Tips for eliminating the pesky "ghost" line that appears in your coded HTML email

Navigating through HTML content and extracting specific elements

Implementing a jQuery full-screen scroller with AJAX functionality

In HTML 5, you can use either #Header or the <header> tag

Ensuring Form Integrity through jQuery Validation

Looking for a way to make one image disappear briefly while transitioning to another image in Javascript

Sending a PHP variable to a JavaScript function

Tips for controlling the placement of divs on a webpage

Creating a sidebar that remains fixed in place even as the page is scrolled down can be achieved by using CSS and positioning properties

Directories within directories - HTML base directories & subdirectories

Struggling to eliminate the padding beneath the menu items in Bootstrap?

Aligning content within a div block