Reputation: 91
I have multiple accordions on a page which have large amounts of text inside each. Only one accordion can be opened at once. I have scrollTo plugin and I'm animating the scrollTo when an accordion is clicked to align with the top of the accordion. If I have too much text, the scrollTo doesn't align to the accordion top. Is there a way to get the ending position of the accordion before the animation starts? Or simply a resolution to aligning the scroll position to the accordion?
$(".accordion h3").click(function () {
var thisTrigger = $("span", this);
var thisIntro = $(this).siblings(".intro");
var thisPane = $(this).siblings(".pane");
var otherIntros = $(this).parents(".parentClass").siblings().find(".intro");
var otherPanes = $(this).parents(".parentClass").siblings().find(".pane");
var otherHeaders = $(otherPanes).siblings(".current");
var otherTriggers = $(otherHeaders).find("span");
if ($(this).hasClass("current")) {
$(this).removeClass("current");
$(thisIntro).removeClass("open");
$(thisPane).slideUp("fast");
} else {
$(this).addClass("current");
$(thisIntro).addClass("open");
$(thisPane).slideDown("fast");
$(otherIntros).removeClass("open");
$(otherHeaders).removeClass("current");
$('html, body').animate({ scrollTop: $(this).position().top }, 500);
}
});
Upvotes: 0
Views: 1005
Reputation: 95
This link helped me: How to set scrollbar to top of section / forget scroll position
Below is my code:
//initializes accordion
$("#search").accordion({
header: "h3"
, fillSpace: true
, active: activeIndex
, change: function (event, ui) {
var index = $(this).accordion("option", "active");
$("[id$=_hdnAccordionIndex]").val(index);
$('.ui-accordion-content').scrollTop(0);
}
});
Upvotes: 1