9513

by rwaldron

HTML

<div class="panelBox">
                <div class="panelHeader panelHeader1">slideToggle (bug)</div>
                <div class="panelContent">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu mauris est. Aliquam blandit, elit sed venenatis tempor, est nisi ornare tellus, eget eleifend risus metus nec lacus. Nulla vitae odio mi. Cras elementum ullamcorper sapien vel vulputate. Nunc sit amet dolor id urna vulputate rhoncus eget in enim. Maecenas eget augue neque, quis dignissim orci. Vivamus pulvinar adipiscing ante ut vulputate. Fusce erat ligula, fringilla ac molestie ac, fringilla ut elit. Donec a risus lobortis nibh placerat adipiscing. Cras elementum, felis non fringilla pretium, lacus velit facilisis nulla, non aliquet justo nisi sed nisl.
                </div>
            </div>
            <div class="panelBox">
                <div class="panelHeader panelHeader2">Manual slideToggle (no bug)</div>
                <div class="panelContent">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu mauris est. Aliquam blandit, elit sed venenatis tempor, est nisi ornare tellus, eget eleifend risus metus nec lacus. Nulla vitae odio mi. Cras elementum ullamcorper sapien vel vulputate. Nunc sit amet dolor id urna vulputate rhoncus eget in enim. Maecenas eget augue neque, quis dignissim orci. Vivamus pulvinar adipiscing ante ut vulputate. Fusce erat ligula, fringilla ac molestie ac, fringilla ut elit. Donec a risus lobortis nibh placerat adipiscing. Cras elementum, felis non fringilla pretium, lacus velit facilisis nulla, non aliquet justo nisi sed nisl.
                </div>
            </div>

CSS

body {
margin: 0;
}
.panelBox {
float: left;
width: 300px;
margin: 0 0 0 50px;
border: 1px solid black;
background-color: white;
}
.panelHeader {
height: 19px;
padding: 8px;
background-color: #460506;
text-align: center;
font-size: 12px;
font-weight: bold;
color: white;
cursor: pointer;
}

JavaScript

// With the bugged slideToggle() function
$('.panelHeader1').click(function() {
    $(this).next().slideToggle(1000);
});

// With my correctly working custom function using the animate() function
$('.panelHeader2').click(function() {
    var el = $(this).next();
    var oldHeight = $(el).height();
    if ($(el).css('display') != 'none' && $(el).css('overflow-x') != 'hidden') {
        $(el).animate({ height:0 },1000,function() {
            $(el).css({ display:'none', height:oldHeight });
        });
    } else {
        $(el).css({ height:0, display:'' })
        $(el).animate({ height:oldHeight },1000);
    }
});