CODEWITHSUNDEEP
javascriptjqueryhtmlcss
maftyycs
maftyycs

Reputation: 147

Arrow rotates when menu toggles

How can I have the arrows rotate onclick and rotate back when I slide open another menu or click on the arrow again?

JSFIDDLE

JS:

//Dropdown Menu
$("a.slide-dropdown").click(function slideMenu() 
{
$(this).next('ul').slideToggle();
$(this).parent().siblings().children().next('ul').slideUp();

});

//Arrows
$( ".crossRotate" ).click(function() {
//alert($( this ).css( "transform" ));
if ($(this).css( "transform" ) == 'none' )
{
    $(this).css( "transform" , "rotate(-180deg)" );
} 
else 
{
    $(this).css("transform","" ) ;
}
});

Upvotes: 0

Views: 563

Answers (1)

Jitendra Tiwari
Jitendra Tiwari

Reputation: 1691

You need to update your crossRotate click event.

Try this

//Arrows
$( ".crossRotate" ).click(function() {
    //alert($( this ).css( "transform" ));
    $(".crossRotate").css("transform","none" ) ;
    if ($(this).css( "transform" ) == 'none' )
    {
        $(this).css( "transform" , "rotate(-180deg)" );
    } 
    else 
    {
       $(this).css("transform","none" ) ;
    }
});

Upvotes: 1

Related Questions