Accordion - scroll back to top of accordion when new panel opens
Hi there - was wondering if anyone could help.
I'm using an accordion to display a list of sub-categories on a classifieds website, there are 3 main categories - we'll call them X, Y, Z.
My problem is that the sub-category lists can be quite long - and aren't consistent between X, Y, Z. Currently, when clicking on header X - the accordion extends way beyond the fold so obviously the user will scroll down the page. When the user clicks Y - currently with a lot smaller sub-category list, the accordion will close up revealing Y's sub-category list however the focal point will not be on the opened Y accordion - it stays at the bottom where sub-category X finished.
Is there some way of directing the user back to the top of the ul.accordionMenu?
****************************************************************************************
HTML is here:
<ul class="accordionMenu">
<li class="genericLinkButton"> <a href="#">Top Power Boats <span class="smallArrow">></span></a>
<ul class="acitem">
<li><a href="/boats/power-boats/acm/"
> ACM (50)</a></li>
<li><a href="/boats/power-boats/aquador/"
> Aquador (50)</a></li>
<li><a href="/boats/power-boats/arno-leopard/"
> Arno Leopard (50)</a></li>
<li><a href="/boats/power-boats/astondoa/"
> Astondoa (50)</a></li>
<li><a href="/boats/power-boats/avon/"
> Avon) (50)</a></li>
<li><a href="/boats/power-boats/azimut/"
> Azimut (50)</a></li>
<li><a href="/boats/power-boats/baja/"
> Baja (50)</a></li>
<li><a href="/boats/power-boats/bavaria/"
> Bavaria (50)</a></li>
<li><a href="/boats/power-boats/bayliner/"
> Bayliner (50)</a></li>
<li><a href="/boats/power-boats/beneteau/"
> Beneteau (50)</a></li>
<li><a href="/boats/power-boats/bertram/"
> Bertram (50)</a></li>
<li><a href="/boats/power-boats/boston-whaler/"
> Boston Whaler (50)</a></li>
<li><a href="/boats/power-boats/broom/"
> Broom (50)</a></li>
<li><a href="/boats/power-boats/burger/"
> Burger (50)</a></li>
<li><a href="/boats/power-boats/campion/"
> Campion (50)</a></li>
<li><a href="/boats/power-boats/canados/"
> Canados (50)</a></li>
<li><a href="/boats/power-boats/capelli/"
> Capelli (50)</a></li>
<li><a href="/boats/power-boats/carver/"
> Carver (50)</a></li>
<li><a href="/boats/power-boats/chaparral/"
> Chaparral (50)</a></li>
<li><a href="/boats/power-boats/chris-craft/"
> Chris-Craft (50)</a></li>
<li><a href="/boats/power-boats/cranchi/"
> Cranchi (50)</a></li>
<li><a href="/boats/power-boats/crownline/"
> Crownline (50)</a></li>
<li><a href="/boats/power-boats/cruisers-yachts/"
> Cruisers Yachts (50)</a></li>
<li><a href="/boats/power-boats/doral/"
> Doral (50)</a></li>
<li><a href="/boats/power-boats/fairey/"
> Fairey (50)</a></li>
<li><a href="/boats/power-boats/fairline/"
> Fairline (50)</a></li>
<li><a href="/boats/power-boats/falcon/"
> Falcon (50)</a></li>
<li><a href="/boats/power-boats/ferretti/"
> Ferretti (50)</a></li>
<li><a href="/boats/power-boats/fletcher/"
> Fletcher (50)</a></li>
<li><a href="/boats/power-boats/formula/"
> Formula (50)</a></li>
<li><a href="/boats/power-boats/fountain/"
> Fountain (50)</a></li>
<li><a href="/boats/power-boats/four-winns/"
> Four Winns (50)</a></li>
<li><a href="/boats/power-boats/glastron/"
> Glastron (50)</a></li>
<li><a href="/boats/power-boats/gobbi/"
> Gobbi (50)</a></li>
<li><a href="/boats/power-boats/grand-banks/"
> Grand Banks (50)</a></li>
<li><a href="/boats/power-boats/guy-couach/"
> Guy Couach (50)</a></li>
<li><a href="/boats/power-boats/hardy/"
> Hardy (50)</a></li>
<li><a href="/boats/power-boats/hatteras/"
> Hatteras (50)</a></li>
<li><a href="/boats/power-boats/interboat/"
> Interboat (50)</a></li>
<li><a href="/boats/power-boats/jeanneau/"
> Jeanneau (50)</a></li>
<li><a href="/boats/power-boats/kelt/"
> Kelt (50)</a></li>
<li><a href="/boats/power-boats/larson/"
> Larson (50)</a></li>
<li><a href="/boats/power-boats/luhrs/"
> Luhrs (50)</a></li>
<li><a href="/boats/power-boats/mangusta/"
> Mangusta (50)</a></li>
<li><a href="/boats/power-boats/maxum/"
> Maxum (50)</a></li>
<li><a href="/boats/power-boats/menorquin/"
> Menorquin (50)</a></li>
<li><a href="/boats/power-boats/mochi/"
> Mochi (50)</a></li>
<li><a href="/boats/power-boats/monterey/"
> Monterey (50)</a></li>
<li><a href="/boats/power-boats/nelson/"
> Nelson (50)</a></li>
<li><a href="/boats/power-boats/nord-west/"
> Nord West (50)</a></li>
<li><a href="/boats/power-boats/ocqueteau/"
> Ocqueteau (50)</a></li>
<li><a href="/boats/power-boats/orkney/"
> Orkney (50)</a></li>
<li><a href="/boats/power-boats/pershing/"
> Pershing (50)</a></li>
<li><a href="/boats/power-boats/princess/"
> Princess (50)</a></li>
<li><a href="/boats/power-boats/pursuit/"
> Pursuit (50)</a></li>
<li><a href="/boats/power-boats/quicksilver/"
> Quicksilver (50)</a></li>
<li><a href="/boats/power-boats/regal/"
> Regal (50)</a></li>
<li><a href="/boats/power-boats/ribcraft/"
> Ribcraft (50)</a></li>
<li><a href="/boats/power-boats/ribeye/"
> Ribeye (50)</a></li>
<li><a href="/boats/power-boats/rinker/"
> Rinker (50)</a></li>
<li><a href="/boats/power-boats/riva/"
> Riva (50)</a></li>
<li><a href="/boats/power-boats/rodman/"
> Rodman (50)</a></li>
<li><a href="/boats/power-boats/sanlorenzo/"
> Sanlorenzo (50)</a></li>
<li><a href="/boats/power-boats/sea-ray/"
> Sea Ray (50)</a></li>
<li><a href="/boats/power-boats/sealine/"
> Sealine (50)</a></li>
<li><a href="/boats/power-boats/seamaster/"
> Seamaster (50)</a></li>
<li><a href="/boats/power-boats/selene/"
> Selene (50)</a></li>
<li><a href="/boats/power-boats/sessa/"
> Sessa (50)</a></li>
<li><a href="/boats/power-boats/shetland/"
> Shetland (50)</a></li>
<li><a href="/boats/power-boats/sunseeker/"
> Sunseeker (50)</a></li>
<li><a href="/boats/power-boats/tiara/"
> Tiara (50)</a></li>
<li><a href="/boats/power-boats/trader/"
> Trader (50)</a></li>
<li><a href="/boats/power-boats/wellcraft/"
> Wellcraft (50)</a></li>
<li><a href="/boats/power-boats/windy/"
> Windy (50)</a></li>
<li><a href="/boats/power-boats/zodiac/"
> Zodiac
(50)</a></li>
<li><a href="/boats/power-boats/" >View full list ></a></li>
</ul>
</li>
<li class="genericLinkButton"> <a href="#">Top Sailing Boats <span class="smallArrow">></span></a>
<ul class="acitem">
<li><a href="#">Boat 1</a></li>
<li><a href="#">Boat 2</a></li>
<li><a href="#">Boat 3</a></li>
<li><a href="#">View full list ></a></li>
</ul>
</li>
<li class="genericLinkButton"> <a href="#">Top other Boats <span class="smallArrow">></span></a>
<ul class="acitem">
<li><a href="#">Boat 1</a></li>
<li><a href="#">Boat 2</a></li>
<li><a href="#">Boat 3</a></li>
<li><a href="#">View full list ></a></li>
</ul>
</li>
</ul>
And js is here:
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};
$(document).ready(function() {$('.accordionMenu').initMenu();});
****************************************************************************************
Any hep would be greatly appreciated.
Thanks