Onclick Show Hide DIV jQuery Demo
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Anjali
In this article we will show you the solution of onclick show hide div jQuery demo, here we needs to use css() and on() methods for hide or show a div element when onclick event triggers. 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 one or more event handlers on the selected elements so we attached click event with the button for generate onclick.
Step By Step Guide On Onclick Show Hide DIV jQuery Demo :-
Here we defined div element with id attribute and two buttons ‘Show and Hide’ with different class attributes.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and we waiting for click event occurrence which is added on on() method with buttons ‘sh and hd’ separately.
At each button we adding display property with div element, here the difference is property values ‘block, none’.
Based on these values defined div element will be in display or hidden state.
<!DOCTYPE html>
<html>
<head>
<title>SHOW HIDE DIV BY ONCLICK</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$('.sh').on('click',function(){
$('div').css('display','block');
});
$('.hd').on('click',function(){
$('div').css('display','none');
});
})
</script>
</head>
<body>
<style>
#ele{
width: 10rem;
height: 10rem;
border: 2px solid green;
background-color: yellow;
}
</style>
<div id="ele"></div>
<button class="sh">Show</button>
<button class="hd">Hide</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 added click event with on() method when user clicks on any ‘Show or Hide’ buttons.
- Within each on function we specified div element then which is appends with css() method with ‘display’-refers style property name, 'block'-refers style property value as arguments for display div element. Likewise we specified css method on second button with different ‘none’ style property value.
- Here one button shows div element and next one hide div element with the help of css method and display property.
- In html block we defined div element with id attribute ‘ele’ and two buttons ‘Show and Hide’ with different class attributes ‘sh, hd’.
- The div element defined with some styles those are ‘width and height set to 10rem, border sets with 2px and green and background color sets to yellow’.
- 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 show or hide div element with onclick 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 yellow box with green border and buttons ‘Show, Hide’ user needs to click on hide button then div will hide so users needs to click on show button div will displayed.
I hope this article on onclick show hide div jQuery demo helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
