Accordion toggle

by Sparrow Squire

HTML

<div class="expander">
    <div class="expanderHeader"> 
        <a href="#" class="title"><h2>Title ...</h2></a>
    </div>
    <div class="expanderBody">
        <p>Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...</p>
        <a href="#" class="close">close</a>
    </div>
</div>

<div class="expander">
    <div class="expanderHeader"> 
        <a href="#" class="title"><h2>Title ...</h2></a>
    </div>
    <div class="expanderBody">
        <p>Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...</p>
        <a href="#" class="close">close</a>
    </div>
</div>

<div class="expander">
    <div class="expanderHeader"> 
        <a href="#" class="title"><h2>Title ...</h2></a>
    </div>
    <div class="expanderBody">
        <p>Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...</p>
        <a href="#" class="close">close</a>
    </div>
</div>

CSS

body {
    font-family:Arial
}
h2 {
    font-size:1.6em;
}
.expander {
     height:auto;
    background: teal;
    color: #000;
    cursor:pointer;
}
.expanderBody {
    height:0px;
    overflow: hidden;
       -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear;
}
    .expanderBody.active {
        height:200px;
     -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear;
    }

JavaScript

//Smoother V
$('.expanderHeader').click(function() {
    if ($(this).next(".expanderBody").hasClass('active')) {
    	$(".expanderBody").removeClass('active');
    }else{
        $(".expanderBody").removeClass('active');
        $(this).next(".expanderBody").addClass('active');
    }
});
$(".close").click(function () {
    $(".expanderBody").removeClass('active');
});

//Slimline V
//$(".expanderBody").hide();

//$(".expanderHeader").click(function () {
//    $(this).next(".expanderBody").slideToggle();
//});

//$(".close").click(function () {
//    $(this).parent().hide();
//});


//Full V
//$(".expanderBody").hide();

//$(".title").click(function () {
//   $(".expanderBody").hide(); 
//    $('.expanderHeader').show();
//    $(this).parent().parent().find(".expanderBody").show();
//});

//$(".close").click(function () {
//    $(this).parent().hide();
//    $(this).parent().parent().find(".expanderHeader").show();

//});