Click the down arrow?? Change the arrow?? Two ways to switch back and forth

Tag: color CTI This mil value awesome nbsp weight code

All I know is that these two kinds are common.

The first kind: Explain that I use the Fontawesome font, first to go to the official website to download to use

class='btn btn-more'>
   class='fa fa-angle-down'></i>
   class='fa fa-angle-up hidden'></i>
</span>

I use bootstrap, so the hidden is self-brought, the above initial state is the down arrow Angle-down is displayed, and then the arrow angle-up is hidden.

On the JS code:

    $ ('. Btn-more'). Click (function (EV) {            $ (this). Children('  . Fa-angle-down'). Toggleclass ('hidden');        $ (this). Children ('. fa-angle-up'). Toggleclass (' Hidden ' );    })

In this way, the up and down arrows can be switched back and forth, in general, it may be used when displaying content

The second method is that the HTML code

                       class="sub-item">                                <a href="javascript:; ">                                                                    class="arrow"></span>                                </a>                            </li>

CSS Code

 .arrow:before { float  : right;    width:20px;    Text -align:center;    Display:inline;    Font -SIZE:16PX;    Font -family:fontawesome;    Height:auto; Content:   " \f104  "  ;    Font -weight: 300  ;    Text -shadow:none;    Position:absolute;    top:4px;    right:14px; Color: #  990  ;} 
. arrow.open:before{
 content:  ' \f107 ';    
}  

JS Code is

$ ('. Nav-item>a'). Click (function () {$ (this). Children (' . Arrow '). Toggleclass ('open')})

The second method is mainly to add a class to cover the previous content, the same fonawesome font ha

Click the down arrow?? Change the arrow?? Two ways to switch back and forth