Focus Accordian Header on Collapse

Question

I have a stack of accordian in the middle of the page , i have implemented the collapse button inside the accordian content div , so that user wont have to go to top and collapse.but when i click on the button it is moving to the top instead of the accordian section.

Here is the fiddler of what i am facing right now. http://jsfiddle.net/FKZtn/15/

$('#close').click(function () {
    $("#accordion").accordion({active: false}).click();
});

how can i focus the header , when i click on the external collapse button?

Answer 1

Well i guess you donot need to write any extra code. just change the html mark up like this for close button.put "#." instead of "#" you will be all set good.

 <div id="close"><a href="#.">Close</a>

ofcourse working fiddle

working fiddle

Answer 2

Try this in click event:

 $('html, body').animate({
    scrollTop: $('#accordion').offset().top
}, 500);

Working Demo