Clickable div, to hide and show content

Question

not sure why this doesnt work, sometimes its need to be double clicked on div to show content, any suggestion why, and how fix it? . I want it to be hide and show #newpost div, when clicked on toggle1 div etc.thanks

 var button = document.getElementById('toggle1'); // Assumes element with id='button' button.onclick = function() { var div = document.getElementById('newpost'); if (div.style.display !== 'none') { div.style.display = 'none'; } else { div.style.display = 'block'; } }; var button = document.getElementById('toggle2'); // Assumes element with id='button' button.onclick = function() { var div = document.getElementById('newpost1'); if (div.style.display !== 'none') { div.style.display = 'none'; } else { div.style.display = 'block'; } }; 

 <nav> <ul> <li id="toggle1">Home</li> <div id="newpost" class="post"> <p>Lorem iporem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quamorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quamsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quam!</p> </div> <li id="toggle2">Contact</li> </ul> </nav> <div id="newpost" class="post"> <p>Lorem ipsum ble ble at quam!</p> </div> <br> <div id="newpost1" class="post"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quam!</p> </div> 

Answer 1

Hmm, maybe your buttons aren't focused at the beginning. Try adding the first line:

 document.querySelector('nav').focus(); var button = document.getElementById('toggle1'); // Assumes element with id='button' button.onclick = function() { var div = document.getElementById('newpost'); if (div.style.display !== 'none') { div.style.display = 'none'; } else { div.style.display = 'block'; } }; var button = document.getElementById('toggle2'); // Assumes element with id='button' button.onclick = function() { var div = document.getElementById('newpost1'); if (div.style.display !== 'none') { div.style.display = 'none'; } else { div.style.display = 'block'; } }; 

 <nav> <ul> <li id="toggle1">Home</li> <div id="newpost" class="post"> <p>Lorem iporem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quamorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quamsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quam!</p> </div> <li id="toggle2">Contact</li> </ul> </nav> <div id="newpost" class="post"> <p>Lorem ipsum ble ble at quam!</p> </div> <br> <div id="newpost1" class="post"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis id, dolorem dolores obcaecati, repellat quam!</p> </div>