Creating Buttons That Possess “display none” and “display block” Properties
The button tags are used to create buttons in HTML, and the jQuery (JavaScript library) is then used to add functionality to the buttons.
Example: display none and display block for a Div Container
Let’s discuss it with a simple example to hide and display a div container using the “display none” and “display block” properties:
<button type="button" class="show">Display</button><br>
<div id="demo">DIV CONTAINER</div>
In the code snippet above, there are tags to create buttons and a div container:
- There is the button tag with “button” declared as its type. Inside the opening button tag is the “hide” class created, and between the opening and closing button tags is the text that will appear on the button.
- Similarly, there is another button tag with the second class named the show, and the text to be displayed on the button is “Display“.
- Then, there is the div tag with the id named “demo,” and then the text is to be displayed on the div container, i.e., “DIV CONTAINER“.
In the script element or in a separate JavaScript file, there should be functions with display none and display block properties:
$(".hide").click(function(){
$("#demo").css("display", "none");
});
$(".show").click(function(){
$("#demo").css("display", "block");
});
});
In the code snippet above, there are the JavaScript functions added to create the functionality for the buttons:
- There is the “ready” function that executes the function inside it when the HTML document or web page is loaded on the browser.
- Inside the main “ready” function, there is the “click” function that refers to the “hide” class (the class that has been created for the Hide button. Inside this function, there is the CSS function with the “display none” property referring to the “demo” id. This means that when the user clicks on the “hide” button, the “display none” property will execute.
- Similarly, there is another “click” function with the class selector referring to the “Display” class and inside that “click” function, there is the CSS function with the “display block” property with the id selector referring to the “demo” id.
The impact of the display none and display block properties will be as follows:
This is how the CSS display none and display block properties are added using jQuery.
Conclusion
Display none and display block properties are added and changed using jquery by creating two separate CSS functions in JavaScript, one with the display none property and the other with the display block property. These CSS functions should refer to the id or classes of the buttons created in HTML so that when the user clicks the relevant button, the CSS display function invokes accordingly.
