buttons toggle content

two buttons show different content on the same page

by Deborah

HTML

<div class="btn button1 on">Show a pink div</div>
<div class="btn button2 off">Show a green div</div>

<div class="clearit">&nbsp;</div>

<div class="zing pink" style="margin-left: 105px;">zing!</div>
<div class="zing green hide" style="margin-left: 105px;">zing!</div>

CSS

div {
    font-family: Arial;
    font-size: 18px;
    text-align: center;
    color: #ffffff;
    padding: 20px;
    margin: 5px;
    display: inline-block;
    float: left;
    width: 170px;
}

.btn.off {
    cursor: pointer;
}

div.clearit {
    width: 100%;
    padding: 5px;
    margin: 0;
}

.hide {
    display: none;
}

.on {
    background: #ccc;
}

.off {
    background: #666;
}

.pink {
    background: #ff0099;
}

.green {
    background: #00c51d;
}

JavaScript

$('.btn').click(function() {
  	$('.btn').toggleClass('on off');
  	$('.zing').toggleClass('hide');
});