Leaderboard

The main issue with your code is how you're trying to find the days element. To explain a bit, lets look at how your HTML gets rendered: <div class='month-container'> <div class='days' id='Vendémiaire'> <div class='day'>1<span class='name'>Raisin</span></div> <div class='day'>2<span class='name'>Safran</span></div> <div class='day'>3<span class='name'>Châtaigne</span></div> <div class='day'>4<span class='name'>Colchique</span></div> <div class='day'>5<span class='name'>Cheval</span></div> </div> <div class='month'>Vendémiaire</div> </div> You are attaching your click handler to the div.month element. That means in your click handler, el is going to reference that element. To try and find the days element, you are looping over the nextElementSibling property until there are no more siblings. Think about that for a moment. nextElementSibling is going to find the elements that come after the current element. What comes after div.next? Nothing. You need to be looking at the previous siblings, using prevElementSibling. Now, once you find your days element, you have another problem. You are testing if it's style.display value is equal to "none". One might think this should be true since you have applied display: none; in your css, but it's not. The reason is that the style properties on the element only refer to styles applied directly to that element via a style="" attribute, not anything inherited via css selectors. Since no direct style was applied to your element, the style.display will be the empty string, fail your condition, and you'll set it to display. On a second click, it would pass and you'd set block and your toggle would start working. Reversing the conditional would fix this double-click issue. --- Now that the issues have been pointed out, there are other things of note and also general ideas that should be applied to make this better. You have both an onclick="" attribute and an addEventListener call on your month elements. You should only have one, and the preferred method is to use addEventListener in your code and stop using the on* attributes. It should be removed, notice I didn't include it in my example html above. Your loop to find the days element is unnecessary. The way your HTML is structured, the days element will be simply el.prevElementSibling, no looping required. If you want to add other elements between your month div and the days elements, a better approach would be to use querySelector on the parent element: el.parentElement.querySelector('.days'); Dealing with style properties directly should generally be avoided if possible. Changing the applied classes is a better approach. For something like this, create another class that sets display to block which can be applied to your days element. You can then use javascript to toggle this class on and off. .days.visible { display: block; } days.classList.toggle('visible'); You can view the above suggestions implemented in this demo fiddle.