Making onClick event on Cascaded DIVs

Question

I'm trying to do some cascading html DIVs but was not able yet.

======Concept======

1 - How should it be at first:

| ParentDiv |

2 - After user clicks on ParentDiv:

| ParentDiv |

======Concept ENDS======

======Code until now======

        <div class="Year" type="button" onClick="showMonths2016()"><p>2016</p</div>
            <div class="Month"><p>January</p></div>
            <div class="Month"><p>February</p></div>
            <div class="Month"><p>March</p></div>

    <script type="text/javascript">

        function = showMonths2016(){    
            document.getElementsByClassName("Month").style.display = "inline-block";
        }
    </script>

======Code until now ENDS======

So, basically, Im setting class Month` display to "none" (have not past the css, sorry, no idea how to format it as code here) and once user clicks the "Div button"(class year), it changes the stated display value to "inline-block", exposing the Month Divs:

User Clicks on Year Div;
onClick event evokes the function "showMonths2016";
The stated function changes the Month Divs´ display value from "none" to "inline-block";
Month Divs are now visible and aligned inline.

I have tested changind the pre-setted value(display:none) manually to "inline-block" and it works like magic! But when I reset it to "none" and try to trigger it by onClick event.... fail!

It is working if you try it manually but not in combination with your javascript function? — Tom el Safadi, Aug 03 '16 at 21:04
The
tag is not closing in the first line, did you remember this? (after "2016") — Tom el Safadi, Aug 03 '16 at 21:20

Tom el Safadi · Accepted Answer · 2016-08-03T21:42:36.867

Firstly you are not closing your <p> tag in the first line.

Secondly getElementsByClassName returns a collection. You can't collectively set properties unless you're using a framwork like jquery.

This would be the right code:

HTML:

<div class="Year" type="button" onclick="showDiv()"><p>2016</p></div>
            <div class="Month" style="display:none;"><p>January</p></div>
            <div class="Month" style="display:none;"><p>February</p></div>
            <div class="Month" style="display:none;"><p>March</p></div>

Javascript:

function showDiv() {

   var elems = document.getElementsByClassName('Month');

    for(var i = 0; i != elems.length; i++)
    {
        elems[i].style.display = "block";
    }

}

See it live here:

https://jsfiddle.net/Anokrize/vq3sLtx3/

Making onClick event on Cascaded DIVs

1 Answers1