How to toggle between CSS changes

Use toggleClass(); as other answers suggest or use toggle();

$('#help_btn').click(function(){ $('#help_box').toggle(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="help_box"><p> Some helpful info!</p></div> <button id="help_btn">help?</button>

You can use toggleClass() to toggle two classes.

ToggleClass logic is that we add the missing class and we remove the previous one.

$('#help_btn').click(function(){ $('#help_box').toggleClass("hidden shown"); });

.shown { display: inline; } .hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="help_btn">Change</button> <div id="help_box"><p> Some helpful info!</p></div>

Create any class

.someclass{ display: inline}

Then toggle class

$('#help_btn').click(function(){ $('#help_box').toggleClass("someClass"); }); 

There are two common ways:

The first one is by checking the css property and reversing it, something like this:

$(".something-i-clicked").on("click", function() { if($(".my-class").css("display") == "none") { // if display: none; is set to .my-class // reverse it to display: block; $(".my-class").css("display", "block"); } else { // it has display: block; // reverse it to display: none; $(".my-class").css("display", "none"); } }) 

The second way is by toggling a modifier css class, maybe like this:

// my_css_file.css .my-class { display: none; } .d-block { display: block; } // my_js_file.js $(".something-i-clicked").on("click", function() { // toggle the class $(".my-class").toggleClass("d-block"); })