Show hide div on radio button

Developer
Size
1,956 Kb
Views
48,576

How do I make an show hide div on radio button?

This is a requirement very common in big data forms to fill-up. For those non-professional programmers, a handy minimal version.. What is a show hide div on radio button? How do you make a show hide div on radio button? This script and codes were developed by Dhanush Badge on 12 November 2022, Saturday.

Show hide div on radio button Previews

Show hide div on radio button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Show hide div on radio button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>How many check boxes do you want when clicked on a radio button?</p>
<input type="radio" name="tab" value="igotnone" onclick="show1();" />
None
<input type="radio" name="tab" value="igottwo" onclick="show2();" />
Two
<div id="div1" class="hide"> <hr><p>Okay Cool! Here are those two...</p>
<input type="checkbox" value="Yes" name="one">
One &nbsp;
<input type="checkbox" value="Yes" name="two">
Two
</div> <script src="js/index.js"></script>
</body>
</html>

Show hide div on radio button - Script Codes CSS Codes

body { font-family: arial;
}
.hide { display: none;
}
p { font-weight: bold;
}

Show hide div on radio button - Script Codes JS Codes

function show1(){ document.getElementById('div1').style.display ='none';
}
function show2(){ document.getElementById('div1').style.display = 'block';
}
Show hide div on radio button - Script Codes
Show hide div on radio button - Script Codes
Home Page Home
Developer Dhanush Badge
Username dhanushbadge
Uploaded November 12, 2022
Rating 3
Size 1,956 Kb
Views 48,576
Do you need developer help for Show hide div on radio button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dhanush Badge (dhanushbadge) Script Codes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!