accordion2

by slawe

HTML

<div id="accordion">
    <h3>Sample Header 1</h3>
    <div>
        <p>
            Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem
        </p>
    </div>
    <h3>Sample Header 2</h3>
    <div>
        <p>
            Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem
        </p>
    </div>
</div>

CSS

#accordion {
    width: 600px;
    border: 1px solid #C0C0C0;
    border-bottom: none;
    box-shadow: 0 0 5px #C0C0C0;
    -webkit-box-shadow: 0 0 5px #C0C0C0;
    margin: 30px auto;
    background: #FFF;
}

#accordion h3 {
    border-bottom: 1px solid #C0C0C0;
    padding: 10px;
}

#accordion div {
    display: none;
    padding: 20px;
    border-bottom: 1px solid #C0C0C0;
    background: #F4F4F4;
}

#accordion p {
    padding: 0;
    margin: 0;
}

#accordion h3:hover {
    cursor: pointer;
}
.forMeasure {
   position: absolute;
   visibility: hidden;
   display: block!important;
}

JavaScript

$('#accordion h3').click(function(){
    var adjustment = 0;
    var div = $(this).next('div');
          
    if(div.css('display') == 'none')
    {
        adjustment += div.addClass('forMeasure').outerHeight();
        div.removeClass('forMeasure');
        div.slideDown();
        div.siblings('div').each(function(){
           if($(this).css('display') == 'block')
           {
               adjustment -= $(this).outerHeight();
               $(this).slideUp();
           }               
        });
    }
    else
    {
        adjustment -= div.outerHeight();
        div.slideUp();
    }
});