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

by bjelline

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();
$('.hideable').hide();

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