Bootstrap 4 Collapse show state with Font Awesome

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

Answer 1

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>

Answer 2

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";
}

Answer 3

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";
}

Answer 4

Solution with no FontAwesome unicode and no JavaScript:

1. Include both icons where you currently have one icon
2. 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;
}

Answer 5

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

Answer 6

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