Accordion Height Jump
Accordion Height Jump
Everytime I change accordion tabs, the container box increases 24px in
height while the animation is working, and when the animation is done,
the height jumps back down to its original height. It **seems** like
the padding is contributing to the problem. Is jQuery not properly
taking the padding in account? Or am I doing something wrong?
The code is posted below. I've tried to strip it down as much as
possible.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=us-
ascii">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<style type="text/css">
body {
background-color: #3e352c;
}
.featured {
width: 355px;
padding: 5px 5px 0 5px;
border: 1px solid silver;
background-color: white;
}
.featured h2 {
height: 42px;
line-height: 42px;
padding: 0 11px;
margin: 0 0 5px 0;
color: #7c7958;
background-color: #e1dcc8;
font-family: Arial, sans-serif;
font-size: 16px;
cursor: pointer;
}
.featured h2.selected {
margin-bottom: 0;
padding-left: 6px;
color: #7c7958;
background-color: #f1efe2;
cursor: default;
}
.featured .accordion-content {
padding: 0 11px 19px 11px;
margin-bottom: 5px;
background-color: #f1efe2;
}
.featured .selected .accordion-content {
padding-left: 6px;
}
.featured .selected {
border-left: 5px solid #a5ac45;
}
.featured .selected .selected {
border-left-style: none;
}
</style>
<title></title>
</head>
<body>
<div class="featured">
<div class="accordion-pane">
<h2>Featured Product</h2>
<div class="accordion-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div class="accordion-pane">
<h2>Find a Resource</h2>
<div class="accordion-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div class="accordion-pane last">
<h2>Become a Partner</h2>
<div class="accordion-content">
ullam mattis, odio ac malesuada varius, ante purus euismod
lorem, ac rhoncus urna nisl nec risus. Integer tincidunt.
</div>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></
script>
<script type="text/javascript" src="scripts/jquery-ui-
personalized-1.5.2.min.js"></script>
<script type="text/javascript">
// Create accordion
$(".featured").accordion({
header: "h2"
});
</script>
</body>
</html>