Answer to http://codereview.stackexchange.com/questions/31367/toggle-script-trouble

HTML

<div id="main" class="hideable"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" alt="image"></div> 
<div id="alles" class="toggleable">alles content</div>
<div id="voorbeelden" class="toggleable">voorbeelden content</div>
<div id="contact" class="toggleable">contact content</div>
<ul>
    <li><a href="#alles" class="button">show alles</a></li>
    <li><a href="#voorbeelden" class="button">show voorbeelden</a></li>
    <li><a href="#contact" class="button">show contact</a></li>
</ul>

CSS

#alles {
    background:#ff4000;
}
#voorbeelden {
    background:#cc6600;
}
#contact {
    background:#bb3300;
}

#main {
    float:right; widht: 50px;
}

JavaScript

$('.toggleable').hide();

$('.button').click(function (event) {
    event.preventDefault();
    var id = $(this).attr('href');
    $(id).toggle();
    
   if ($('.toggleable').is(':visible')) {
  $('.hideable').hide();
} 
    else {
	$(".hideable").show();
}
});