How can I make it so that when a radio option is selected, two DIVs are displayed? Here's my HTML:
/* Here is the CSS */
#firstblock {
display: none;
padding: 10px;
}
#secondblock {
display: none;
padding: 10px;
}
#uploadButton {
display: none;
padding: 10px;
}
input[value="firstblock"]:checked ~ #firstblock {
display: block;
#uploadbutton: display: block;
}
input[value="secondblock"]:checked ~ #secondblock {
display: block;
}<form id = "selectFeature" method = "POST">
<input type="radio" name="action" value="firstblock" /> First Upload
<input type="radio" name="action" value="secondblock" /> Second Upload
<div id ="firstblock" class="show-hide">
<h2> This is the first block. <br> </h2>
</div>
<div id="secondblock" class="show-hide">
<h2> This is the second block </h2>
</div>
<div id="uploadButton">
This is a button
</div>
</form>Is there an easy way to only show the upload button after selecting either the firstblock or secondblock option?
Thanks in advance.