Bootstrap 4 change caret on clicking dropdown

user_8316953 0
Viewed 33871

Using Bootstrap 4, I am trying to create a dropdown with caret (Ex: pointing right). On clicking dropdown the caret pointing direction should be changed (Ex: down).

I have got a way to do that

/*Please refer the above link for full code details*/

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
</a>

<div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        This content is hidden
      </div>
</div>

.css

.panel-heading .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {
    content: "\e080";
}

But the catch is, initially all the carets pointing down which should be right

There are other approaches. But I don't want to use JQuery, as my application is angular 4. Would like to avoid JQuery/JS as much as possible.

This is not a duplicate question.

Many thanks in advance...

bootstrap-4 angular css html
6 Answers

Here is how I got this working with Bootstrap4-CSS-fontAwesome & No JS/JQuery.

<a class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId">
  click
</a>

<div id="anyId" class="collapse">
    Hi
</div>

<!-- CDNs for font-awesome, bootstrap, JQuery -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

.css

.accordion-toggle:after {
  font-family: 'FontAwesome';/* essential to enable caret symbol*/
  content: "\f0d7";/* adjust as needed, taken from font-awesome.css */
  color: grey;
}
.accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\f0da";  /* adjust as needed, taken from font-awesome.css */
}

Thank you @Satheesh Kumar

user_83169530

Here's how I got mine working using only CSS for bootstrap 4.2 and fontawesome. I've used the aria label and added transitions for the icon, using a span class for the icon

CSS:

#accordionExample .btn[aria-expanded=false] span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
 transition: all .5s;
}

#accordionExample .btn[aria-expanded=true] span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
  transition: all .5s;
  -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

HTML:

<div class="container my-5 mw-600">
  <div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">

        <a class="btn btn-link d-flex" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false">
          Collapsible Group Item #1
          <span class="ml-auto"></span></a>

    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">

        <a class=" btn btn-link collapsed d-flex align-items-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false">
          Collapsible Group Item #2
          <span class="ml-auto"></span>
        </a>

    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">

        <a class="btn btn-link collapsed d-flex" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false">
          Collapsible Group Item #3<span class="ml-auto"></span>
        </a>

    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div>

Demo: https://codepen.io/anon/pen/XoLgbY

user_95198940

If you're using SCSS, there are built-in mixins especially for this, located at ~bootstrap/scss/mixins/_caret.scss.

caret-down, caret-up, caret-right, caret-left and caret($direction).

So, this can become as easy as:

.panel-heading .accordion-toggle {
    @include caret(right);

    &.collapsed {
        @include caret(left);
    }
}

or, if your HTML contains aria-expanded attribute (which is highly advised)

.panel-heading .accordion-toggle {
    &[aria-expanded="false"] {
        @include caret(left);
    }

    &[aria-expanded="true"] {
        @include caret(right);
    }
}
user_16345850

I used Vinni's solution, it seemed to me the simplest one, but the icon showed as a box with Chrome and Firefox, only Safari and Chrome mobile displayed correctly, I did some digging and found out that the new version of Font Awesome also requires font-weight: 900; when you use solid icons in custom css classes, so while some icons may showed fine the caret I was using (f0d7) didn't and needed font-weight 900; I also used font-family: 'Font Awesome\ 5 Free'; instead of only font-family: 'FontAwesome'; The revised CSS looks like this:

.accordion-toggle:after {
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
content: "\f0d7";/
color: grey;
}
.accordion-toggle.collapsed:after {
content: "\f0da";
}
user_77986880

You can try this one too. CSS Only.

.navbar-nav .dropdown.open .caret{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}
user_12157310
Related