StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery accordion + scrollTo - need accordion to scroll back into focus
text
Body
copied!<p>was wondering if anyone could help.</p> <p>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.</p> <p>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 - the window stays at the bottom where sub-category X finished.</p> <p>Is there some way of directing the user back to the top of the ul.accordionMenu?</p> <hr> <p>JS is here:</p> <pre><code>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();}); </code></pre> <hr> <p>Any help would be greatly appreciated - I have searched on here and tried a few of the the suggestions however nothing seems to be working.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload