Show/Hide Panels

by ChrisStanyon

HTML

<div id="wrapper">
    <button id="toggle">Show</button>
    <div id="panel1" class="panel">This is panel 1</div>
    <div id="panel2" class="panel">This is panel 2</div>
</div>

CSS

#wrapper { padding: 10px; width: 400px; height: 200px; background-color: #FFFF00; }
#panel2 { display:none; }
.panel { border: 1px solid green; padding:5px; }

JavaScript

$('#toggle').click(function() {
    $('.panel').toggle();
    $(this).text( ($(this).text() == 'Show') ? 'Hide' : 'Show' );
});