Show/Hide with .slideToggle()

by labanino

HTML

<div class="row service-boxes">
    <div class="medium-4 columns">
        <div class="show_hide">1</div>
    </div>
    <div class="medium-4 columns">
        <div class="show_hide">2</div>
    </div>
    <div class="medium-4 columns">
        <div class="show_hide">3</div>
    </div>
</div>
<div class="sliding-content">Content 1</div>
<div class="sliding-content">Content 2</div>
<div class="sliding-content">Content 3</div>

CSS

body {
    font-family:"arial";
}
.sliding-content {
    display: none;
}
.show_hide {
    cursor: pointer;
}
.show_hide {
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px 0 10px 10px;
    display: inline-block;
}

JavaScript

$('.show_hide').click(function () {
    var index = $(this).index(), newTarget = $('.sliding-content').eq(index);
    $('.sliding-content').not(newTarget).slideUp('fast');
    newTarget.delay('fast').slideToggle('fast');
    return false;
});