How to rotate arrow icon 180 degrees onclick.

We can create rotating icon on dropdown list, that activate when click on icon.

Extension:

_.extend(FacetsFacetedNavigationItemCategoryView.prototype, {                   

template: jj_subcategory_plpsubcategory_tpl,

events: _.extend(FacetsFacetedNavigationItemCategoryView.prototype.events, {

                        ‘click .subdiv2’: ‘hide’,                    }), 

                  hide: function (e) { 

                      var id = $(e.currentTarget).attr(“id”); 

                        $(“#” + id + “.target”).toggle();

                        if ($(e.currentTarget).hasClass(“active”)) {

                            $(e.currentTarget).removeClass(“active”); 

                      }

                        else    {

                            $(e.currentTarget).addClass(“active”);

                                                 } 

                  },

}),

.CSS:

#iconrotation{    padding: 10px;    rotate: 180deg;

Leave a comment

Your email address will not be published. Required fields are marked *