Toggle Class

by Charles Butler

HTML

<div class="toggle-container">
    <div class="toggle">
        <div class="toggle-title">Here is title one.</div>
        <div class="toggle-body-container">
            <div class="toggle-inner">Here is title one's body.</div>
        </div>
    </div>
</div>
<div class="toggle-container">
    <div class="toggle">
        <div class="toggle-title">Here is title two.</div>
        <div class="toggle-body-container">
            <div class="toggle-inner">Here is title two's body.</div>
        </div>
    </div>
</div>
<div class="toggle-container">
    <div class="toggle">
        <div class="toggle-title">Here is title three.</div>
        <div class="toggle-body-container">
            <div class="toggle-inner">Here is title three's body.</div>
        </div>
    </div>
</div>
<div class="toggle-container">
    <div class="toggle">
        <div class="toggle-title">Here is title four.</div>
        <div class="toggle-body-container">
            <div class="toggle-inner">Here is title four's body.</div>
        </div>
    </div>
</div>

CSS

.toggle-container {
     padding:5px;
 }
 .toggle-title {
     margin: 0px;
     padding:5px;
     display: block;
     cursor: pointer;
     font-weight: bold;
     color: #666;
     border: 1px solid #efefef;
 }
 .toggle-title:hover {
     color: #555;
     border: 1px solid #ccc;
 }
 .toggle-body-container {
     overflow: hidden;
     padding: 5px;
     height: 0px;
 }
 .toggle-inner {
 }

JavaScript

$(document).ready(function () {
     $('.toggle-title').click(function () {
         if ($(this).parent().is('.open')) {
             $(this).closest('.toggle').find('.toggle-body-container').animate({
                 'height': '0'
             }, 200);
             $(this).closest('.toggle').removeClass('open');
         } else {
             var newHeight = $(this).closest('.toggle').find('.toggle-inner').height() + 'px';
             $(this).closest('.toggle').find('.toggle-body-container').animate({
                 'height': newHeight
             }, 200);
             $(this).closest('.toggle').addClass('open');
         }
     });
 });