How to change the bootstrap caret pointing direction on click event

Question

I\'m using 2.3.2 bootstrap

As I can change the position of the caret icon when I click the menu button.

I need that when I click the icon caret pointing up and

Answer 1

Updated Fiddle

Added the following CSS

.navbar .nav li.dropdown.open>.dropdown-toggle .caret {
    border-top-color: transparent;
    border-bottom: 4px solid #000000;
    position: relative;
    top: -3px;
}

Answer 2

Just add this CSS:

   .navbar-default .navbar-nav>li>a:focus .caret{
        transform:rotate(-90deg);
        transition:all 0.3s ease-in-out; /*for smoothness*/
    }

Answer 3

you can add this

.nav .dropdown.open .caret{
    border-top: none;
    border-bottom: 4px solid #000000;
}

Updated Fiddle

Answer 4

In css..
When .caret is a Class of arrows in a li or span.

.nav-list .caret {

    transform:rotate(-90deg);
    transition:all 0.3s ease-in-out; 
}

.nav-list .active .caret {

    transform:rotate(0deg);
    transition:all 0.4s ease-in-out;

}

100% Fun!.
Credits to Tariq Javed.