CODEWITHSUNDEEP
htmlcss
Ravi Singh
Ravi Singh

Reputation: 441

Display 2 divs when an radio option is selected

I would like to display 2 DIVs when a radio option is selected. e.g. Following is my HTML

/* Following is my 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> Following is first block. <br> </h2>
    </div>
                                    
    <div id="secondblock" class="show-hide">
      <h2> Following is second block </h2>
      </div>
      
    <div id="uploadButton">
      This is button
    </div>
</form>

I would like the upload button to appear only after either firstblock or secondblock option is selected. Is there any easy way to do it?

Thanks in advance.

Upvotes: 1

Views: 59

Answers (1)

Patrick Mlr
Patrick Mlr

Reputation: 2965

Just use the same like you did already.

input[value="firstblock"]:checked ~ #uploadButton    
input[value="secondblock"]:checked ~ #uploadButton

Here's a snippet:

#firstblock {
       display: none;
       padding: 10px;
}   
 
#secondblock {
       display: none;
       padding: 10px;
}

#uploadButton {
       display: none;
       padding: 10px;
}

input[value="firstblock"]:checked ~ #firstblock,
input[value="firstblock"]:checked ~ #uploadButton {
      display: block;
}

input[value="secondblock"]:checked ~ #secondblock,
input[value="secondblock"]:checked ~ #uploadButton {
      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> Following is first block. <br> </h2>
</div>

<div id="secondblock" class="show-hide">
  <h2> Following is second block </h2>
  </div>

<div id="uploadButton">
  This is button
</div>
</form>

Some improvement suggestions:

You can also minify your css, if you want to use the same css-rule. It's recommended if you want to set the same rule to multiple ids or classes.

This could look like this:

#firstblock,
#secondblock,
#uploadButton {
   display: none;
   padding: 10px;
}

input[value="firstblock"]:checked ~ #firstblock,
input[value="firstblock"]:checked ~ #uploadButton,
input[value="secondblock"]:checked ~ #secondblock,
input[value="secondblock"]:checked ~ #uploadButton {
      display: block;
}

You can also add a label to your input, so the user can click on the text and will select the radio.

Example snippet here:

<label>
  <input type="radio" name="action" value="firstblock" id="firstradio"/>
  First Upload
</label>
<label>
  <input type="radio" name="action" value="secondblock" id="secondradio" />
  Second Upload
</label>

Upvotes: 3

Related Questions