Bootstrap 4 Collapse show state with Font Awesome icon

Question

I have a single Bootstrap 4 collapse as follows...

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a>
<div class="row collapse in" id="collapseNEWS">Content</div>

This automatically displays the content unless the font awesome icon is clicked. I am displaying the fa-chevron-circle-up icon upon initial load.

Once the icon is clicked, the content closes and I'd like to show the fa-chevron-circle-down icon instead. How would I achieve this?

I've looked at the alpha documentation: http://v4-alpha.getbootstrap.com/components/collapse/

...but I'm not clear how I establish the state to show either...

<i class="indicator fa fa-chevron-circle-up" aria-hidden="true"></i>

or...

<i class="indicator fa fa-chevron-circle-down" aria-hidden="true"></i>

Thank you NJ

score 87 · Accepted Answer · edited Sep 30 '18 at 16:10

87

You can add the font-awesome icon with custom CSS (content property):

Just use <i class="fa"></i> and

[data-toggle="collapse"] .fa:before {   
  content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f13a";
}

Example in codepen

edited Sep 30 '18 at 16:10

Mohamed Mo Kawsara

4,400
2
27
43

answered Aug 16 '16 at 08:58

tmg

19,895
5
72
76

score 29 · Answer 2 · answered Sep 26 '17 at 07:18

To extend this further - now using Bootstrap 4 Beta if it makes a difference:

This won't work when the initial state is collapsed - the icon will be reversed. Clicking the button through a cycle will fix it - but it'd be nice to have it right to begin with. The secret: add

class="collapsed"

to the toggling link(s). An example with a clickable text heading as well as the icon:

<div class="card-header d-flex justify-content-between" id="headingCollapse1">
    <div>
        <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
            Card Header
        </a>
    </div>
    <div>
        <a data-toggle="collapse" class="collapsed btn btn-default btn-xs text-right" href="#collapse1" aria-label="Expand/Collapse Card 1" aria-expanded="false" role="button">
            <i class="fa" aria-hidden="true"></i>
            <span class="sr-only">Expand/Collapse Card 1</span>
        </a>
    </div>
</div>
<div id="collapse1" class="collapse" aria-labelledby="headingCollapse1">
    <div class="card-body">
        Here is some wonderful content that you can't see...until expanded!
    </div>
</div>

I also find the plus/minus symbols more intuitive - with arrows, I'm never quite sure if it means "current status is opened/closed" or "press this to open/close". Based on tree views, among others, I'm used to "+" means "closed/click to open", and "-" means "open/click to close". So while not directly part of the question I'll leave this for others to find (full credit to @tmg above for format - I just plugged in the "correct" characters):

[data-toggle="collapse"] i:before{
    content: "\f146";
}

[data-toggle="collapse"].collapsed i:before{
    content: "\f0fe";
}

Josh Withee · Answer 3 · 2019-10-04T17:58:16.367

Solution with no FontAwesome unicode and no JavaScript:

Include both icons where you currently have one icon
Use CSS to hide the up-arrow element while the content is expanded, and hide the down-arrow while the content is collapsed

Example:

HTML:

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS">
    <i class="fa fa-chevron-circle-up"></i>
    <i class="fa fa-chevron-circle-down"></i>
</a>

CSS:

[aria-expanded="true"] .fa-chevron-circle-up, 
[aria-expanded="false"] .fa-chevron-circle-down {
    display:none;
}

score 9 · Answer 4 · answered Mar 01 '18 at 15:37

You can add toggleClass() to onclick event of <a></a> element and additional class fa-rotate-180 for element of Font Awesome icon.

fa-rotate-180 - standard class from Font Awesome.

<a href='' onclick="$('#collapsed-chevron').toggleClass('fa-rotate-180')">
   <i class="fa fa-chevron-circle-up" id="collapsed-chevron"></i>
   Link Text
</a>

score 6 · Answer 5 · answered Nov 18 '18 at 06:56

Using Rails and Bootstrap 4 with Fontawesome 5.5

This didn't quite work for me, It was flipping it on the re-close. I had to add another state control:

[data-toggle="collapse"] .fas:before {  
  content: "\f055";
}

[aria-expanded="true"] .fas:before {  
  content: "\f056";
}

[data-toggle="collapse"].collapsed .fas:before {
  content: "\f055";
}

score 3 · Answer 6 · answered Aug 22 '18 at 14:48

For SASS version of FontAwesome 5, use the fa-content() mixin

HTML:

<i class="fas"></i>

SASS:

[data-toggle="collapse"] i.#{$fa-css-prefix}s:before {
  content: fa-content($fa-var-chevron-circle-down);
}

[data-toggle="collapse"].collapsed i.#{$fa-css-prefix}s:before {
  content: fa-content($fa-var-chevron-circle-right);
}

I prefer using chevron in a circle background

score -3 · Answer 7 · answered Feb 25 '21 at 21:56

-3

html code

<a class="list-group-item" aria-current="true" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i class="fas fa-caret-right"></i></a>

css code

[aria-expanded="true"] .fa-caret-right{ transform: rotate(90deg); }

answered Feb 25 '21 at 21:56

Selçuk Ataselim

15
1

Please explain you answer, not just pasting code – nurgasemetey Feb 26 '21 at 14:21
It is not the matter of understanding. It is guideline of StackExchange. Someone who expert should know what guideline is. – nurgasemetey Feb 17 '23 at 19:47

Bootstrap 4 Collapse show state with Font Awesome icon

7 Answers7

Linked