blocks

stackOverflow question

by Visual24

HTML

<div class="block">
    <h2>I'm block 1</h2>
</div>

<div class="block">
    <h2>I'm block 2</h2>
</div>

<div class="block">
    <h2>I'm block 3</h2>
</div>

<div class="block">
    <h2>I'm block 4</h2>
</div>

CSS

.block {
    width: 200px;
    height: 100px;
    float: left;
    margin: 20px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}
.block:nth-child(1) {
    background: green;
}
.block:nth-child(2) {
    background: red;
}
.block:nth-child(3) {
    background: orange;
}
.block:nth-child(4) {
    background: pink;
}

JavaScript

$(document).ready(function() {

    $(".block").click(function() {
        $(this).siblings().slideToggle("slow");
    });

});