JQuery hide & show

JQuery hide & show

by labanino

HTML

<button class="green">CLICK TO SHOW RED</button>
<div class="green-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean malesuada consequat sapien, quis semper turpis sollicitudin quis. Maecenas vitae magna massa. Vestibulum ante turpis, pretium ut pellentesque viverra, convallis nec quam. Sed scelerisque fringilla orci eu consectetur. </div>

<div class="red-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean malesuada consequat sapien, quis semper turpis sollicitudin quis.
<button class="red">CLICK TO SHOW GREEN</button>
</div>

CSS

.green-content, .red-content {
    display:block;
    padding:20px;
}
.green-content {
    background-color:green;
    color:white;
}
.red-content {
    background-color:red;
    color:white;
}
.green, .red { cursor:pointer; }

JavaScript

$(".red-content, .red").hide();

$(".green").click(function () {
    $(".green-content").toggle();
    $(".red-content, .red").slideDown();
});
$(".red").click(function () {
    $(".red-content").toggle();
    $(".green-content, .green").slideDown();
});