Bootstrap 4 change caret on clicking dropdown

bootstrap 4 dropdown
bootstrap dropdown arrow change
bootstrap 4 accordion
caret bootstrap
bootstrap select dropdown icon change
font awesome
dropdown caret css
bootstrap 4 icons

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


In Bootstrap V4 they have dropped the Glyphicons. Below code will work well as per your need. For drop-down icon style, you can use font awesome.

[data-toggle="collapse"]:after {
display: inline-block;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  transform: rotate(90deg) ;
  transition: all linear 0.25s;
  }   
[data-toggle="collapse"].collapsed:after {
  transform: rotate(0deg) ;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
      <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" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <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" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <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>

Changing Dropdown Icon on Bootstrap 4, CDNs for font-awesome, bootstrap, JQuery -->. 10. <link href="https://netdna.​bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">. 11. In Bootstrap 4 you can remove caret form dropdown button by setting $enable-caret sass variable false. But you must set this variable before importing the bootstrap sass file. // Your variable overrides $enable-caret: false // Bootstrap and its default variables @import "node_modules/bootstrap/scss/bootstrap";


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

Bootstrap Dropdowns, <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">​</script> <style> /* Style to reverse the caret icon from pointing downwards to  Bootstrap 4 change caret on clicking dropdown. Related. 2756. How can I change an element's class with JavaScript? 3741. How do I make the first letter of a string


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

How to replace dropdown-toggle icon with another default icon in , Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're toggled by clicking, not by hovering; this is an intentional design decision. of .dropdown-toggle-split for proper spacing around the dropdown caret. Use data-offset or data-reference to change the location of the dropdown​. Is it possible to change the caret in the dropdowns? background and border of the actual dropdown menu itself, not the caret. bootstrap/blob


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

Bootstrap 4 remove caret from dropdown button, Bootstrap dropdowns are toggled by clicking, not hovering as it was an intentional "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.​css" />. Step 4: The new icon will start getting displayed on the webpage. Note: Below program code’s dropdown icon is also togglable by adding a single line of jQuery code with one click function on the icon. Program: This example changing the default icon of Bootstrap dropdown icon.


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

Change caret on clicking dropdown with Bootstrap4-CSS , 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:  Bootstrap 4 Grid BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples Bootstrap 4 Theme BS4 Basic Template Bootstrap 4 Ref All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts JS Tooltip


Change the caret symbol on dropdown, A really nice feature in Bootstrap is collapsible sections – you can have multiple However, how do you signal to your users that they need to click on a target in order triggers for a collapse target, nor does it handle automatically changing their direction PURE css solution for rotating carets based on expanded section  @REJack With the below code I create an AdminLTE2 dropdown menu which includes a standard bootstrap dropdown button. When clicking on the button instead of being able to select one of the button items the whole dropdown menu disappears so it seems impossible to be able to use a bootstrap dropdown button.


Dropdowns · Bootstrap, Dropdown menus are buttons that reveal menu options to users when clicked. Update the third li item with Bootstrap's “dropdown” class and change the you can add a span with Bootstrap's “caret” class to create a dropdown arrow icon: Inside the button element, add four span elements with Bootstrap's “icon-bar”  If you click the save button, your code will be saved, and you get an URL you can share with others. Save Cancel By clicking the "Save" button you agree to our terms and conditions .


How to remove arrow in dropdown in Bootstrap ?, Click to toggle collapse status of section below. 3. <div class="expand_caret caret"></div>. 4. </a>. 5. <div id="collapseExampleArea" class="collapse">. 6. Fair point Mark! But there are still some situations where developers might prefer a hover. So in this short tutorial we’ll build a typical Bootstrap navbar with a quick solution for showing its dropdowns on hover. Note: This tutorial assumes you have some familiarity with Bootstrap 4. Bootstrap Navbar Dropdown on Hover