In this article we will show you the solution of onclick display block jQuery, here we needs to use css() and on() methods for specify display property. The css() method sets or returns one or more style properties for the selected elements.
It returns the specified CSS property value of the FIRST matched element.
The on() method attaches click event handler for the selected element of button.
Step By Step Guide On Onclick Display Block jQuery :-
Here we defined h1 element with id attribute and button ‘Display’.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we waiting for click event occurrence which is appended with button tag then there we referring h1.
It’s appends with css() method for sets ‘display’ property.
<!DOCTYPE html>
<html>
<head>
<title>ONCLICK DISPLAY BLOCK</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$('button').on('click',function(){
$('h1').css('display','block');
})
})
</script>
</head>
<body>
<style>
#txt{
color: orange;
padding: 10px;
margin: 10px;
width: fit-content;
background-color: brown;
display: none;
}
</style>
<h1 id="txt">This is the hidden text</h1>
<button>Display</button>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we appending click() method with button element by using tag name ‘button’ for generate click event when user clicks ‘Display’.
- Within function we referring h1 element by tag name for specify display property we needs to use css() method. Which is defines with ‘display’-refers style property name, 'block'-refers style property value as arguments for display h1 element.
- In html block we defined h1 elements with id attribute ‘txt’. The id ‘txt’ is defined with some styles those are “color sets to color, padding&margin sets to 10px, width sets to content size, background color sets to brown and display sets to none”.
- Here the display property initially we hidden so when user clicks on button ‘Display’ then only h1 element will display on webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to use display block style property with onclick event in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see button ‘Display’ user needs to click on it then we can see h1 element string ‘This is the hidden text’ with applied styles ‘txt’.
I hope this article on onclick display block jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
