How do you scroll a selected item to the top in a collapsible panel?

[Jenova]

I have a web page layout consisting of a fixed header, fixed footer and 2 scrollable columns at the center.
The left column contains a jquery accordion. When the user clicks a Store Panel, it opens and displays its contents and scrolls the selected panel and its contents to the top of the column div. See jsfiddle: http://jsfiddle.net/jenova007/9q67hh0f/
How do I replace this jquery accordion with a normal collapsible panel (i.e. where a user clicks on a panel and other previously expanded panels remain opened until the user clicks on them again to close the panels) and yet still retain the scrolling effect (i.e scroll the most recently selected panel to the top of the column div)? I know how to create a collapsible panel, but I wish to mimic the scrolling effect featured in this jquery accordion. Thank you.

[James_Hibbard]

Hi,

You could use the following beforeActivate hook.

beforeActivate: function(event, ui) {
   // The accordion believes a panel is being opened
  if (ui.newHeader[0]) {
      var currHeader  = ui.newHeader;
      var currContent = currHeader.next('.ui-accordion-content');
   // The accordion believes a panel is being closed
  } else {
      var currHeader  = ui.oldHeader;
      var currContent = currHeader.next('.ui-accordion-content');
  }
   // Since we've changed the default behavior, this detects the actual status
  var isPanelSelected = currHeader.attr('aria-selected') == 'true';

   // Toggle the panel's header
  currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

  // Toggle the panel's icon
  currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

   // Toggle the panel's content
  currContent.toggleClass('accordion-content-active',!isPanelSelected)    
  if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

  return false; // Cancel the default action
}

This is unashamedly stolen from here:

http://stackoverflow.com/questions/15702444/jquery-ui-accordion-open-multiple-panels-at-once

Demo