blocks

stackOverflow question

by Gabriele Petrioli

HTML

<div class="block-wrapper">
    <div class="block">
        <h2>I'm block 1</h2>
    </div>
</div>
<div class="block-wrapper">
    <div class="block">
        <h2>I'm block 2</h2>
    </div>
</div>
<div class="block-wrapper">
    <div class="block">
        <h2>I'm block 3</h2>
    </div>
</div>
<div class="block-wrapper">
    <div class="block">
        <h2>I'm block 4</h2>
    </div>
</div>

CSS

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

JavaScript

$(document).ready(function() {

    $(".block-wrapper").click(function() {
        $(this).siblings().find('.block').slideToggle("slow");
    });

});