Search jQuery

jQuery Forum

Using jQuery UI

terrykm

Force accordion to focus at top

in Using jQuery UI • 3 years ago

I have an accordion of 4 elements each of which opens to more than a screen's worth of text.

Reading to the bottom of each section requires scrolling. Once there the next accordion is visible.

When that new section is clicked it opens by expanding to the top, leaving the window focused on the bottom of that section.

So you have to scroll back up to begin reading at the top of that section. Not good.

Any way to keep the focus at the top of each section when it opens?

Or, failing that, at the top of the page - which in this case would show the top of the newly opened section?

Thanks!

Terry

Replies(7)

system68

Re: Force accordion to focus at top

2 years ago

This worked for me:

var accordion = $( ".ui-accordion-container" ).accordion({

change: function(event, ui) {

$("#wrapper").show()[0].scrollIntoView(true);

}

});

chinigla

Re: Force accordion to focus at top

1 year ago

I know this is going back a while now, but were you able to get this working? I tried the suggestion on the thread but it isn't working for me. Maybe I'm not putting it in the right place.

Thanks!

Mike

mike_laird

Re: Force accordion to focus at top

1 year ago

I had a very similar, or maybe the same problem, and tried a lot of things. I got old fashioned destination anchors to work. So I have <a id="topSpot"></a> in the HTML at the beginning of the Accordion sections. I downloaded the scrollTo plugin. Lastly, I have the following jQuery for the Accordion.

    $(function() {
        $( "#sections" ).accordion({
            autoHeight: false,
            change: function(event, ui)
                {
                $("#sections").bind("accordionchange", function(event, ui)
                    {
                    $.scrollTo("#topSpot");
                    });
                },
        }).show();
    });
// .show() combined with style='display: none;' in the html div makes the image 'pop' - no pre-display lag

Good luck, I spent many hours getting to this.

artfuldoja

Re: Force accordion to focus at top

1 year ago

Hi,

I too have been hunting high and low for a solution to this, see the error here: www.muso-syndicate.com/accordion - and what happens if you click on classical and then jazz headers.

Do you think the above would work in my example and if so where do I stick the code in my markup on the above site?

Is there a separate ScrollTo library or is it a function included in the Jquery UI library?

Also, do I literally use #sections and #topSpot or do they refer to unique labels you've used elsewhere in your code? Im not sure what the equivalent of mine would be.

Thanks in advance for your headsup on this, it's been a long journey getting here!

mike_laird

Re: Force accordion to focus at top

1 year ago

artful,

scrollTo is a jQuery plug-in. Do a search in the Plug In section of jQuery.

The id names that I used are just my names. You can use anything.

I put the following expression above the div for the Accordion after experimenting a bit about where to place it in the HTML. It is a destination anchor, so "your mileage may vary" depending on your HTML. Just move the expression up or down a bit if you don't like the results.

<a id="topSpot"></a> 

After looking at your page, I see that some sections show the next Accordion header section at the bottom of the window. If you want that behavior for all, you'll probably have to have 2 (or more) destination anchors and put the bind function inside an if else statement. If in one section. bind to anchor #1, if in another, bind to anchor #2. But I'm speculating on the behavior you want. You may want something completely different.

scadole

Re: Force accordion to focus at top

2 months ago

What a pain in the ass it is to sign up for an account on this site..... I digress.

I was using the accordion as a mobile version of a website.... the accordion found @ http://jqueryui.com/accordion/. I had some long content and when opening a section, it would close the previously opened section simultaneously and you would end up somewhere in the middle, no where near the accordion heading. NO GOOD. There is very little on how to do this on the INTERWEBS so I thought I'd like to share. First, I tried to find a way to for the accordion to use scrollTo() but it would jump so i made a function that would animate the jump to the top of the page. All of this had to be done in the jQuery.ui file so you'll have to copy and modify it by doing this.

I copied the jQuery UI file and searched for the accordion function. I added this function to it:

function scrollTo(element, to, duration) {

if (duration < 0) return;

var difference = to - element.scrollTop;

var perTick = difference / duration * 10;

setTimeout(function() {

element.scrollTop = element.scrollTop + perTick;

scrollTo(element, to, duration - 10);

}, 10);

}

You can add this anywhere, so long as it's not inside any of the other functions. It needs to be by itself.

Search for the Accordion section of the UI and add the code in red to it....

_eventHandler: function( event ) {

var options = this.options,

active = this.active,

clicked = $( event.currentTarget ),

clickedIsActive = clicked[ 0 ] === active[ 0 ],

collapsing = clickedIsActive && options.collapsible,

toShow = collapsing ? $() : clicked.next(),

toHide = active.next(),

eventData = {

oldHeader: active,

oldPanel: toHide,

newHeader: collapsing ? $() : clicked,

newPanel: toShow

};

scrollTo(document.body, 0, 100); //Scroll to Top Modification

event.preventDefault();

.... and BOOM. I'm sure there are better ways to do this, and if i was more versed in jQuery, It would have been a lot easier, but this worked for me.