how to stop page scrolling down while using jQuery Accordion

Question

I am using jQuery UI Accordion in my App, one problem I have is: inside the 2nd tab, there is a very long form. Everytime when user come to the 2nd tab, the page automatically scroll down to the bottom of the form. even after I hard code and set the focus to the first text box of the form.

any ideas?

thank you all in advance

Answer 1

I'm not sure without some code if this works, but there is a change event which according to the doco:

This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.

So is it possible to use this event and set focus to a valid target once the expand has happened.

I have tested this with the according demo /demos/according/default.html and it is called after the expand:

<script type="text/javascript">
$(function() {
    $("#accordion").accordion({
        change: function(event, ui) {
            alert('blah');
            // Add your focus code in here
        }
    });
});
</script>

I'd also like to mention in all cases I have used the accordian the page doesn't jump down after expanding.

Answer 2

Well i have tried to sue focus while index change, however, at least, it doesn't work for me. here is my final solution which is turn off the animation in accordion UI:

$("#accordion").accordion(
                     {
                         autoHeight: false,
                         animated: false,
                         active: parseInt(index),
                         event: ""
                     }
);

Thank you for your answer.