Macking onClick event on Cascaded DIVs : Im really trying to do some cascading html DIVs but was not able yet... If anybody could help that would be so <3!

<i>======Concept======</i><br><br>

1 - How should it be at first:<br>

<b>|  ParentDiv  |</b><br><br>


2 - After user clicks on ParentDiv:<br>

<b>|  ParentDiv  |</b><br>

&nbsp;&nbsp;&nbsp;&nbsp;<b>|  ChildDiv1 |  |  ChildDiv2 |  |  ChildDiv3 |</b><br><br>


<i>======Concept ENDS======</i><br><br>


<i>======Code until now======</i><br>
			
			<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>

<body>

<i>======Code until now ENDS======</i><br>

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:

1. User Clicks on Year Div;
2. onClick event evokes the function "showMonths2016";
3. The stated function changes the Month Divs´ display value from "none" to "inline-block";
4. 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!