Last Updated on September 18, 2022 by Roshan Parihar
In this tutorial, learn how to remove display none using jQuery. The short answer is to use the show() function to remove display:none CSS from an element with jQuery.
The display none properties are added to the element to hide it from the users on a page. You can remove it to display to your users on button click. Let’s find with the different examples given below.
Method 1: How to Remove Display None Using jQuery show() Function
If you want to remove display none using jQuery, you can use show() that requires no argument to pass. It displays the hidden element in a page by removing the display:none CSS property from the element.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("p").show(); }); }); </script> <p style="display:none;">Welcome to TutorialDeep!</p> <button type="button">Remove Display None</button> |
Output
The above example shows only the button element. However, it also contains the text content that you will get when you click the button. Click the button to see the hidden text content.
Method 2: jQuery Remove Display:None Using css() Function
To remove the display none using jQuery, you can add display:block to the element using css() of jQuery. The css() function takes two arguments in comma separation. The first is "display" and the second argument is "block". Adding this will automatically remove the display none from the element.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("div").css("display", "block"); }); }); </script> <div style="display:none;">This is a div content.</div> <button type="button">Remove Display None</button> |
Output
When you click the button given above, you will get the hidden element. This is because of the removal of the display none CSS property using jQuery.
Method 3: Using toggle() Function to Toggle Display:None
In addition to the above examples, you can also use the jQuery toggle() function to toggle the display of the element. When the element is in a hidden condition, the function displays the element. If the element is in display condition, it hides the element.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('button').click(function(){ $("p").toggle(); }); }); </script> <p style="display:none;">This is a paragraph.</p> <button type="button">Toggle Remove Display None</button> |
Output
The above example contains the same button element and hidden content. When you click the button given above, it shows/hides the text content.
You May Also Like to Read
- jQuery Check If Element Exists or Hidden
- jQuery Remove Style Attribute with Examples
- How jQuery Apply Multiple CSS Style to HTML Element
Reference