Single Toggle - Easy #simple

by Rian .N Herdian

HTML

<div id="wrapper"> Toggle Method
<div id="action-buttons">
    <a class="button" onclick="$('#boxone').toggle();$('#boxtwo').hide();return false;"><span>One</span></a>
    <a class="button" onclick="$('#boxtwo').toggle();$('#boxone').hide();return false;"><span>Two</span></a>
</div>
<div id="boxone" style="display:none;">Box One</div>
<div id="boxtwo" style="display:none;">Box Two</div>
</div>

<div id="wrapper"> Show Hide Method
<div id="action-buttons">
    <a class="button" onclick="$('#showboxone').show();$('#showboxtwo').hide();return false;"><span>One</span></a>
    <a class="button" onclick="$('#showboxtwo').show();$('#showboxone').hide();return false;"><span>Two</span></a>
</div>
<div id="showboxone" style="display:none;">Box One</div>
<div id="showboxtwo" style="display:none;">Box Two</div>
</div>

CSS

#wrapper{
    background:#ccc;
    padding:10px;
}
#boxone, #showboxone{
    background:whitesmoke;
}
#boxtwo, #showboxtwo{
    background:#ddd;
}
.button{
    cursor:pointer;
}