Onclick Radio Button Show Hide DIV JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of onclick radio button show hide div JavaScript, here we are using onclick event on radio type input tag so it will definitely loads respective methods what we defined there we sets div element display property to either ‘block’ or ‘none’ based on onclick event values.
So we can easily achieved result of show/hide div element when user clicks on radio buttons.
Step By Step Guide On Onclick Radio Button Show Hide DIV JavaScript :-
Here we defined two radio type input elements with onclick events ‘funs(),funh()’ and a div tag defined with some text initially we set it as none.
When user clicks on ‘Show’ radio button then div element ‘sh’ will displayed with defined text and vice versa when user clicks on ‘Hide’ radio button div element get disappeared by styles ‘display’ property value we given in methods we can also use instead of ‘visibility’ style property.
<!DOCTYPE html>
<html>
<head>
<title>SHOW/HIDE USING RADIO</title>
</head>
<body>
<style>
#sh{
display: none;
}
</style>
Show<input type="radio" onclick="funs()">
Hide<input type="radio" onclick="funh()">
<div id="sh">Youre pressed radio button...</div>
<script>
function funs(){
document.getElementById('sh').style.display="block";
}
function funh(){
document.getElementById('sh').style.display="none";
}
</script>
</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.
- 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.
- Here we defined two radio type input elements ‘Show, Hide’ with onclick attributes ‘funs(),funh()’ for generate defined methods respectively depends on user response.
- A div element defined with text ‘Youre pressed radio button...’ and had id attribute ‘sh’. Initially we sets div element display property to ‘none’ in internal style block.
- In script we defined funs() method within that we sets div element ‘sh’ style ‘display’ property as ‘block’ that’s way when user clicks on ‘show’ radio button div ‘sh’ will appeared suddenly.
- In vice versa when user clicks on Hide radio button the ‘funh()’ method will load there we sets div ‘sh’ display property as ‘none’ so it will disappeared.
- 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/hide div element when clicks on radio button using javascript.
When we executes program on browser we can see two radio buttons namely ‘Show, Hide’ when user clicks on them respective methods will loaded.
First user needs to clicks on Show radio button because we initially sets div element none so it will appeared then if user clicks on ‘Hide’ then it get disappeared successfully.
I hope this tutorial on onclick radio button show hide div JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
