0

I'm trying to show 2 (or more) div's on a checked radio button. I am not very experienced, am learning. It works to show one div. But I can't seem to get the next one shown. I've tried googling and searching Stackoverflow but have not found a solution.

Example html:

<div id="div1">
<h3>Question 1</h3>
<input id="Radio1" name="Radio1" type="radio" value="Radio1"> <label for="Radio1">Yes</label>
<p>Text 1</p>
</div>

<div id="div2">
<h3>Question 2</h3>
<input id="Radio2" name="Radio2" type="radio" value="Radio2"> <label for="Radio2">Yes</label>
<p>Text 2</p>
</div>

<div id="div3">
<h3>Question 3</h3>
<input id="Radio3" name="Radio3" type="radio" value="Radio3"> <label for="Radio3">Yes</label>
<p>Text 3</p>
</div>

CSS:

  #div2 {
    display:none;
  }
  #div3 {
    display:none;
  }
 input#Radio1:checked ~ #Div2 {
    display: block;
  }

So as mentioned, this works to show Div2 when radio1 is checked. But how do I expand or add a css rule to also show div3 when radio1 is checked. I do not want to incorporate question 3 in div2 for other reasons. Is this possible with CSS only?

Thanks in advance!

Pvangerrevink
  • 1
  • 2
  • Welcome to the community, First of all there is no HTML tags like div1 and div2. You need to assign id as "div1", "div2". Also css file is wrong. #div3 is not closed with closing braces. – Charu Apr 16 '20 at 10:51
  • I'm sorry for the sloppy codeblocks. But the divs have ID's in reality. The code was just for indication purposes. So
    etc and the css has closing braces. I've editted the code above
     – Pvangerrevink Apr 16 '20 at 11:04

0 Answers0