accordian nav - wrapped div

by hlmurray91

HTML

<section class="accordian">
    <div class="wrapper">
        <a class="toggle" rel="nav_1">
            <h1>View 1</h1>
        </a>
        <div class="content" id="nav_1">
            <p>( 1 ) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standaing versions of Lorem Ipsum.</p>
        </div>
    </div>
    <div class="wrapper">
        <a class="toggle" rel="div_2">
            <h1>View 2</h1>
        </a>
        <div class="content" id="div_2">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standaing versions of Lorem Ipsum.</p>
        </div>
    </div>
    <div class="wrapper">
        <a class="toggle" rel="div_3">
            <h1>View 3</h1>
        </a>
        <div class="content" id="div_3">
            <p>( 3 ) It is a mes by accident, sometimes on purpose (injected humour and the like).Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standaing versions of Lorem Ipsum.</p>
        </div>
    </div>
</section>

CSS

a {
    background:red;
    margin:3px 1% 0 0;
    float:left;
    width:100%;
}
.content {
    display:none;
    float:left;
    background:#ccc;
}
.toggle.move {
    background: blue;
    -webkit-transition: all 0.25s ease;
}

JavaScript

$(document).ready(function () {
    $accordian = $('.accordian');
    $('.toggle').on('click', function () {
        
        // toggle active content
        var $activeContent = $(this).next('.content');
        $(this).toggleClass('move');
        $activeContent.slideToggle();

        // deactivate other content
        var $otherContent = $accordian.find('.content').not($activeContent);
        $otherContent.slideUp();
        $accordian.find('.move').not(this).removeClass('move');
    });
});