I know this has been discussed several times, but I have an issue that is a little different. when .slideUp() is called and the browser wind has been scrolled down to see all the bottom content, it flashes many times as the div is sliding closed.
Example page is below, just click where it says to, then slide to the bottom and close one of the upper divs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This is the title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.Accordion > div.Content').click(function() {
$(this).prev('div.collapsePanelHeader').slideDown(1000);
$(this).slideUp(1000);
});
$('div.Accordion > div.collapsePanelHeader').click(function() {
$(this).slideToggle(1000);
$(this).next('div.Content').slideToggle(1000);
});
$('div.Accordion > div.collapsePanelHeader2').click(function() {
$(this).toggleClass('accordionHeaderSelected','accordionHeader');
$(this).next('div.Content2').slideToggle(1000);
});
});
</script>
<style type="text/css">
.Accordion
{
font-size: .9em;
background-color: #ebebeb;
border: solid 2px #ccc;
padding: 5px 10px;
width: 500px;
}
p
{
font-size: 1em;
}
.collapsePanelHeader
{
}
.HeaderContent
{
background-color: #ebebeb;
}
.Content
{
background-color: #fff;
border: solid 1px #ccc;
padding: 10px;
}
.accordionHeaderSelected
{
border: solid 1px #ccc;
background-color: #EBEBEB;
margin-bottom: 10px;
}
.accordionHeader
{
border: none;
background-color: #EBEBEB;
margin-bottom: 10px;
text-decoration: none;
}
.collapsePanelHeader2
{
}
.HeaderContent2
{
background-color: #ebebeb;
}
.Content2
{
background-color: #ebebeb;
padding-left: 30px;
}
.gvCSections
{
padding-top: -10px;
}
.gvCSections tr td
{
padding: 5px;
}
</style>
</head>
<body>
<div class="Accordion">
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
</div>
</body>
</html>
An easy fix is to check the computed height of the body element before closing a collapsible element, then set the body's computed height as its CSS height property.
This forces the body element to maintain its height, even when closing a tall panel that would normally reset/redraw the body to its earlier default height.
Note also that before checking the computed height, the CSS height is reset to auto, otherwise jQuery bypasses the computed style and uses the value set during the previous pass.