I see you work without jQuery so here is an answer without.
Loop over all inner_div children and hide them by default,then show content div 1. Afterwards the hiding and showing is handled by the click handlers.
Ofcourse this is one way of doing it.
function hideAllContent(){ // loop over the inner_div children and hide them Array.prototype.forEach.call(document.getElementById('inner_div').children, function(v){ v.style.display = 'none'; })}function divVisibility(divId){ var el = document.getElementById(divId); if(el){ hideAllContent(); el.style.display = 'block'; }}hideAllContent();divVisibility('Div1'); // open by default with this content.buttons a { font-size: 16px;}.buttons a:hover { cursor:pointer; font-size: 16px;}<div class="buttons"><a href="#" onclick="divVisibility('Div1');">Div1</a> | <a href="#" onclick="divVisibility('Div2');">Div2</a> | <a href="#" onclick="divVisibility('Div3');">Div3</a> | <a href="#" onclick="divVisibility('Div4');">Div4</a></div><div id="inner_div"><div id="Div1">I'm Div One</div><div id="Div2">I'm Div Two</div><div id="Div3">I'm Div Three</div><div id="Div4">I'm Div Four</div></div>