0

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);
    }
});
Collin
  • 91
  • 1
  • 11
  • have you tried anchor links at the end of the big text? – ggzone Mar 07 '12 at 16:35
  • Since clicking the accordion scrolls the page much further down than usual due to the amount of text, the position taken in by $(this).position().top is wrong. I just need to get that ending top position of the accordion. Anchors would not work. – Collin Mar 07 '12 at 16:41

1 Answers1

1

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);            
    }
});
Community
  • 1
  • 1
FROgistics
  • 95
  • 1
  • 1