Home/ Questions/Q 565867
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T12:55:02+00:00

Please check out http://jsbin.com/omuqo for a demo of this issue. When you open a

  • 0

Please check out http://jsbin.com/omuqo for a demo of this issue.

When you open a panel by clicking on the handle, panels below slightly jitter throughout the animation.

In the demo, the below panels should remain completely still since all panels are of equal height. When you have a more complex accordion with panels of varying height, add easing, and so on, the jitter is still visible in various ways.

To debug, I’ve ditched the accordion plugin in Jquery UI and implemented my own, following the advice here.

Here’s the complete code should jsbin not work.

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
* { margin: 0; padding: 0; } 
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } 
dt { background-color: #ccc; } 
dd { height: 100px; } 
#footer { background-color: #ff9; } 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 
  <dl> 
    <dt>Handle</dt> 
    <dd id="1">Content</dd> 
    <dt>Handle</dt> 
    <dd id="2">Content</dd> 
    <dt>Handle</dt> 
    <dd id="3">Content</dd> 
    <dt>Handle</dt> 
    <dd id="4">Content</dd> 
  </dl> 
  <div id="footer"> 
    Some more content 
  </div> 
</body> 
</html>

And the Javascript:

$.fn.accordion = function() {
  return this.each(function() {
    $container = $(this);

    // Hijack handles.
    $container.find("dt").each(function() {
      var $header = $(this);
      var $content = $header.next();

      $header
        .click(function() {  
          $container
            .find("dd:visible")
            .animate({ height: 0 }, { duration: 300, complete: function() {
                $(this).hide();
              }
            });
          if(!$content.is(":visible")) {
            $content
              .show()
            $content
              .animate({ height : heights[$content.attr("id")] }, { duration: 300 });
          }
          return false;
        });
    });

    // Iterate over panels, save heights, hide all.
    var heights = new Object();
    $container.find("dd").each(function() {

      $this = $(this);
      heights[$this.attr("id")] = $this.height();
      $this
        .hide()
        .css({ height : 0 });
    });
  });
};

$(document).ready(function() {
  $("dl").accordion();
});

To see a smooth accordion implementation, check out the homepage of Muxtape.

Any advice?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It seems I have a solution. Synchronize by pegging to an independent outside transition through the step callback. Here is a demo of the new method.

    This was a real headache!

    The javascript:

    $.fn.accordion = function() {
  return this.each(function() {
    $container = $(this);

    // Hijack handles.
    $container.find("dt").each(function() {
      var $header = $(this);
      var $selected = $header.next();

    $header
        .click(function() {  
          if ($selected.is(":visible")) {
            $selected
              .animate({ height: 0 }, { duration: 300, complete: function() {
                $(this).hide();
              }
            });
          } else {
            $unselected = $container.find("dd:visible");
            $selected.show();
            var newHeight = heights[$selected.attr("id")];
            var oldHeight = heights[$unselected.attr("id")];

            $('<div>').animate({ height : 1 }, {
              duration  : 300, 
              step      : function(now) {
                var stepSelectedHeight = Math.round(newHeight * now);
                $selected.height(stepSelectedHeight);
                $unselected.height(oldHeight + Math.round((newHeight - oldHeight) * now) - Math.round(newHeight * now));
              },
              complete  : function() {
                $unselected
                  .hide()
                  .css({ height : 0 });
                }
            });
          }
          return false;
        });
    });

    // Iterate over panels, save heights, hide all.
    var heights = new Object();
    $container.find("dd").each(function() {

      $this = $(this);
      $this.css("overflow", "hidden");
      heights[$this.attr("id")] = $this.height();
      $this
        .hide()
        .css({ height : 0 });
    });
  });
};

$(document).ready(function() {
  $("dl").accordion();
});
    • 0