Sequential selection, how to make a check?

Question

css

<script>
    function a() {document.getElementById('info1').style.display='block';}
    function b() {document.getElementById('info2').style.display='block';}
    function c() {document.getElementById('info3').style.display='block';}
</script>

<input   type="radio" name="1"   onChange="a()">1
<input   type="radio" name="1"   onChange="b()">2
<input   type="radio" name="1"   onChange="c()">3
<br>
    <div id="info1" style="display:none">
        <label><input name="2" type="radio" value="Да" />1Да</label>
        <label><input name="2" type="radio" value="Нет" />1Нет</label>
    </div>
    <div id="info2" style="display:none">
        <label><input name="3" type="radio" value="Да" />2Да</label>
        <label><input name="3" type="radio" value="Нет" />2Нет</label>
    </div>
    <div id="info3" style="display:none">
        <label><input name="4" type="radio" value="Да" />3Да</label>
        <label><input name="4" type="radio" value="Нет" />3Нет</label>
    </div>
</form>

Help, I've been fiddling with this for 2 hours now.
js I don't know well, c++ won't help... How to implement a check so that if the 1st option is selected, the 2nd one is not displayed? As in the screenshot

This is how it should be...


Write a check for me, please. I did not succeed (

Answer 1

Create a function like this

var elems = document.getElementsByTagName("div");
for (var i = 0; i<elems.length; i++) {
     elems[i].style.display = 'none';
}

and call it at the very beginning in functions (a, b, c).