jQuery toggle CSS

Question

I want to toggle between CSS so when a user clicks the button   user button  it shows the menu   user options  and changes the CSS  and when the user clicks it again it goes back to normal  So far this is all I have       user button   click  function             user options   toggle            user button   css               borderBottomLeftRadius   0px           borderBottomRightRadius   0px               return false        Can anybody help

User · Answer

The best option would be to set a class style in CSS like  showMenu and  hideMenu with the various styles inside  Then you can do something like      user button   addClass  showMenu

User · Answer

You can do by maintaining the state as below      user button   on  click  function        if   this  attr  data-click-state      1              this  attr  data-click-state   0             this  css  background-color    red               else           this  attr  data-click-state   1           this  css  background-color    orange                Take a reference from hear codepen example

User · Answer

You might want to use jQuery s  addClass and  removeClass commands  and create two different classes for the states  This  to me  would be the best practice way of doing it

User · Answer

I would use the toggleClass function in jQuery and define the CSS to the class e g      start of css     user button active       border-bottom-right-radius  5px      border-bottom-left-radius  5px      -webkit-border-bottom-right-radius  5px     user-agent specific        -webkit-border-bottom-left-radius  5px      -moz-border-radius-bottomright  5px      -moz-border-radius-bottomleft  5px     etc            start of js        user button   click function             user options   toggle          this  toggleClass  active        return false

User · Answer

For jQuery versions lower than 1 9  see https   api jquery com toggle-event        user button   toggle function              user button   css  borderBottomLeftRadius   0px        function              user button   css  borderBottomLeftRadius   5px           Using classes in this case would be better than setting the css directly though  look at the addClass and removeClass methods alecwh mentioned       user button   toggle function              user button   addClass  active       function              user button   removeClass  active

User · Answer

The initiale code must have borderBottomLeftRadius  0px      user button   toggle   css  borderBottomLeftRadius    5px

[jquery] jQuery toggle CSS?

Examples related to jquery

Examples related to css

Examples related to toggle