HTML Nested Switches

Question

I have 4 switches (A, B, C, D). When I press switch A, there will be two more options - A1 and A2. The same thing will happen to the rest. And if I choose D2, 2 more switches will appear.

How to do it in HTML?

Answer 1

HTML and CSS3 version ( Fiddle ):

HTML for group "D" (other groups are similar)

<div>
    <input type="radio" name="level0" value="D" id="D"/>
    <label for="D">D</label>
    <div class="sub1">
        <div>
            <input type="radio" name="level1" value="D0" id="D0"/>
            <label for="D0">D0</label>
        </div>
        <div>
            <input type="radio" name="level1" value="D1" id="D1"/>
            <label for="D1">D1</label>
            <div class="sub2">
                <div>
                    <input type="radio" name="level2" value="D10" id="D10"/>
                    <label for="D10">D1-0</label>
                </div>
                <div>
                    <input type="radio" name="level2" value="D11" id="D11"/>
                    <label for="D11">D1-1</label>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.sub1, .sub2 { display: none; }

:checked ~ .sub1, :checked ~ .sub2 {
    display: block;
    margin-left: 40px;
}

Answer 2

You can use only a specific identifier for one element in a document. You must put different identifiers on each element and make them visible separately:

<input onclick="document.getElementById('extra1').style.visibility='visible';document.getElementById('extra2').style.visibility='visible';" type="radio" />Apple

<input type="radio" id="extra1" style="visibility:hidden" other choice here />

<input type="radio" id="extra2" style="visibility:hidden" other choice here />

Answer 3

, , , "" html. , javascript RB.

, , , , . .

: id , RB , , . inline javascript css , , . , , , onclick, , RB: D

Answer 4

@guffa I think I will just change your answer a bit. Place all the extra radio buttons inside the element <div>as follows:

<input onclick='document.getElmentById("optional_buttons").style.display="block"' type="radio" />
<div id="optional_buttons" style="display: none;" >
optional radio buttons
</div>