How To Change CSS Display Property To None Or Block Using JQuery

Home » Add Display Attribute Jquery » How To Change CSS Display Property To None Or Block Using JQuery

Maybe your like

Advertisements How to Change CSS display Property to none or block using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery css() Method

You can use the jQuery css() method to change the CSS display property value to none or block or any other value. The css() method apply style rules directly to the elements i.e. inline.

The following example will change the display of a DIV element on button click:

Example

Try this code » <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Change CSS display Property to none or block</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> #myDiv{ padding: 20px; background: #abb1b8; margin-top: 10px; } </style> <script> $(document).ready(function(){ // Set div display to none $(".hide-btn").click(function(){ $("#myDiv").css("display", "none"); }); // Set div display to block $(".show-btn").click(function(){ $("#myDiv").css("display", "block"); }); }); </script> </head> <body> <button type="button" class="hide-btn">Display none</button> <button type="button" class="show-btn">Display block</button> <div id="myDiv">#myDiv</div> </body> </html>

Alternatively, if don't want to bother about the initial value of the element's display property, but you want to toggle between its initial value and none, you can simply use the jQuery show(), hide() or just toggle() method. The following example shows how it works:

Example

Try this code » <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Toggle CSS display of an Element</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> #myDiv{ padding: 20px; background: #abb1b8; margin-top: 10px; } </style> <script> $(document).ready(function(){ // Hide div by setting display to none $(".hide-btn").click(function(){ $("#myDiv").hide(); }); // Show div by removing inline display none style rule $(".show-btn").click(function(){ $("#myDiv").show(); }); // Toggle div display $(".toggle-btn").click(function(){ $("#myDiv").toggle(); }); }); </script> </head> <body> <button type="button" class="hide-btn">Hide</button> <button type="button" class="show-btn">Show</button> <button type="button" class="toggle-btn">Toggle</button> <div id="myDiv">#myDiv</div> </body> </html>

Related FAQ

Here are some more FAQ related to this topic:

  • How to add CSS properties to an element dynamically using jQuery
  • How to add attribute to an HTML element in jQuery
  • How to remove attribute from an HTML element in jQuery
Previous Page Next Page Advertisements

Tag » Add Display Attribute Jquery