accordion display position

Question

I am a newbie for jQuery. I am trying jQuery UI accordion function and have a problem to display it in the proper position. I see below question has asked without answer which may be similar but more complicated than mine because it involves scrollTo which I don't use. jQuery scrollTo accordion end position

My question is simple. When I just use the accordion example code from jQuery website and put long content in the first panel. the 2nd panel will be pushed to a much lower position that you need to scroll down to find the panel. When you click 2nd panel, browser will not direct you to the top of the accordion or at least the top of the 2nd panel. Users need to scroll up before seeing the content in 2nd panel.

Here is the Fiddle code.

Please kindly help. Thanks!

Spectre87 · Accepted Answer · 2012-07-30T14:14:46.920

2

You could set up code to scroll to the top of the new panel when the open panel changes, like this:

$("#accordion").accordion({
  change : function (event, ui) {
      $('html, body').animate({
         scrollTop: $(ui.newHeader).offset().top
      }, 500);          
  }
});

You might also want to set autoHeight: false on the accordion, to keep each panel sized to it's content.

$("#accordion").accordion({
  autoHeight: false,
  change : function (event, ui) {
      $('html, body').animate({
         scrollTop: $(ui.newHeader).offset().top
      }, 500);          
  }
});

EDIT: To fix the problem that was described in a comment, use the following code in the accordion's change event handler:

if(ui.newHeader.length > 0) {
    $('html, body').animate({
        scrollTop: $(ui.newHeader).offset().top
    }, 500);
}

This will prevent an error from occurring when all of the panels are closed.

A jsFiddle is here.

edited Jul 30 '12 at 14:14

answered Jul 29 '12 at 15:30

Spectre87

2,374
1
24
37

Alex, Thanks for your kindly help showing the way the animate could serve this purpose. I try to modify it to meet my need but it sounds workable whenever I don't collapse all panels. Once I collapse all panels, the accordion function seems not workable anymore. could you help to check what makes the conflicts? Thanks again for the patience clarifying these basic questions for a beginner. [Here](http://jsfiddle.net/sg9jb/1/) is the updated fiddle sample code. – user1560363 Jul 30 '12 at 06:58
I tried to search some info of scrollup, and found below I believe is the root cause: **Warning: .scrollTop() will return 0 (and setting it to anything won't work) if the element, or a parent element, is set to "display:none;". I had to apply my .scrollTop() logic after the element was shown.** However, I am still too innocent to know how to resolve this then apply such a good function in my case. Any more hints for me to dig out? Thanks! – user1560363 Jul 30 '12 at 08:57
@user1560363 I edited my answer - it should work now. P.S. please remember to up-vote and accept answers that solve your problem. – Spectre87 Jul 30 '12 at 14:22
Alex, it works perfectly. I accept the answer but still need some more reputations before I could up-vote this. I will remember to do it once I am able to. Thanks again! – user1560363 Jul 30 '12 at 15:26

accordion display position

1 Answers1