Menu icon Foundation
Accordion jump to top when active

I have been searching and haven't found a solution to this yet. When an accordion item is selected, how would I make it jump to the top of that activated accordion? I was thinking I might be able to use a callback, but am not finding documentation for those.

Thanks for any suggestions.

accordion

I have been searching and haven't found a solution to this yet. When an accordion item is selected, how would I make it jump to the top of that activated accordion? I was thinking I might be able to use a callback, but am not finding documentation for those.

Thanks for any suggestions.


Lauren Paul gave the most helpful answer for this post
Lauren Paul over 5 years ago

You are trying to do something like this, right? http://www.annualreports.vcu.edu/president/excellence/index.html

I did not use F5 Accordions for this (I used jQuery UI accordions), so I do not know if I can be of much help. But I will post my callback function in case you can find a way to adapt it.

 function(event, ui){


    if(ui.newHeader.length>0) {
      var ww = document.documentElement.clientWidth;
      var scrollTop = $("#accordion").scrollTop();
      var top = $(ui.newHeader).offset().top;

      if (ww < 600 ) { 
      $("html,body").animate({ scrollTop: scrollTop + top -1 }, 200);
      } if (ww < 800) { 
      $("html,body").animate({ scrollTop: scrollTop + top -30 }, 200);
      } else {
      $("html,body").animate({ scrollTop: scrollTop + top -141}, 200);
      }

    } else {
      var ww = document.documentElement.clientWidth;
      var scrollTop = $("#accordion").scrollTop();
      var top = $(ui.oldHeader).offset().top;

      if (ww < 600 ) { 
      $("html,body").animate({ scrollTop: scrollTop + top -1 }, 200);
      } if (ww < 800) { 
      $("html,body").animate({ scrollTop: scrollTop + top -30 }, 200);
      } else {
      $("html,body").animate({ scrollTop: scrollTop + top -141}, 200);
      }
    }
    }

Rafi Benkual over 5 years ago

Are you trying to get the active accordion to move to the top when clicked?

If so here is an example: http://jsfiddle.net/4jkvg/1/

Or do you have very long content that exceeds the page height?

If so maybe this helps: http://jsfiddle.net/TGv6E/6/

Shawn Jones over 5 years ago

Thanks Rafi. I will play with these to see if I can get one to work for what I need.

Some of my accordions have a long content. So say I have the second one open, then open the third one, it opens, but then is in the middle of the content. I want the page to jump up to the top of the one I just clicked. Here is the example I have:

http://beta.kingswaychurch.org/ministries/kids/

Scroll down, click on Serve. Then keep scrolling down and click on Resources. Resources opens in the middle of the content, so you have to scroll back up to get to the top.

Does that make sense?

Shawn Jones over 5 years ago

I am using F5 Accordions too, if that makes a difference.

Lauren Paul over 5 years ago

You are trying to do something like this, right? http://www.annualreports.vcu.edu/president/excellence/index.html

I did not use F5 Accordions for this (I used jQuery UI accordions), so I do not know if I can be of much help. But I will post my callback function in case you can find a way to adapt it.

 function(event, ui){


    if(ui.newHeader.length>0) {
      var ww = document.documentElement.clientWidth;
      var scrollTop = $("#accordion").scrollTop();
      var top = $(ui.newHeader).offset().top;

      if (ww < 600 ) { 
      $("html,body").animate({ scrollTop: scrollTop + top -1 }, 200);
      } if (ww < 800) { 
      $("html,body").animate({ scrollTop: scrollTop + top -30 }, 200);
      } else {
      $("html,body").animate({ scrollTop: scrollTop + top -141}, 200);
      }

    } else {
      var ww = document.documentElement.clientWidth;
      var scrollTop = $("#accordion").scrollTop();
      var top = $(ui.oldHeader).offset().top;

      if (ww < 600 ) { 
      $("html,body").animate({ scrollTop: scrollTop + top -1 }, 200);
      } if (ww < 800) { 
      $("html,body").animate({ scrollTop: scrollTop + top -30 }, 200);
      } else {
      $("html,body").animate({ scrollTop: scrollTop + top -141}, 200);
      }
    }
    }

Shawn Jones over 5 years ago

Hi Lauren,

Yes, that is exactly how I need it to work. Thanks for the example and code. I will see if I can make it work with the F5 accordions.

Shawn

Lauren Paul over 5 years ago

Awesome, good luck. Let me know if you have any questions about what I did.

Shawn Jones over 5 years ago

Any idea on how to do this with the Foundation Accordion since apparently there are no callbacks with F5?

Zane Taylor over 5 years ago

Good question. Why aren't there callbacks for the F5 accordion?

Hassan Bazzi over 5 years ago

Hey man.

I ran into this same issue. Here's my simple solution that works quite well:

$(document).foundation();
$(".accordion").on("click", "dd:not(.active)", function (original) {
original = $(this);
  $("dd.active").find(".content").slideUp("800", function(){

  });
  $(this).find(".content").slideToggle("800", function() {
    $('html,body').animate({
          scrollTop: original.offset().top
        }, 1000);
        original.addClass("active");
        $(".accordion dd.active").not(original).removeClass("active");
  });
  });

For myself, I'm also animating the tabs so they don't just jump. Feel free to play around with this. Let me know if you don't know how to manipulate it and I can help you out.

The jist of it is really just setting the original into a variable, and then simply scrolling to it with an animate function.

Winona Kumon over 5 years ago

Hi Hassan,

If there are nested accordion, this will include all the nested accordion to have 'active' class then will be removed once clicked again.

Aldren Espejo almost 5 years ago

Hi,

I used this to solve the problem:

 $(document).foundation('accordion', {
  callback: function (el){
    var containerPos = $(el).parent().offset().top;
    $('html, body').animate({ scrollTop: containerPos }, 600);
  }
});

This also works on nested accordion. I looked at their accordion.js code and found out that they actually returned the target element in the callback function so I used it instead (the 'el'). There are similar code here https://github.com/zurb/foundation/issues/2578 posted long ago but does not solved the nested style.

I hope this will work for you too.

Jordi Pagano almost 5 years ago

Hi,

according the F5 documentation, the correct code for the callback function is this:

http://foundation.zurb.com/docs/components/accordion.html#callbacks

 $(document).foundation({
  accordion: {
    callback : function (el) {
    var containerPos = $(el).parent().offset().top;
      $('html, body').animate({ scrollTop: containerPos }, 600);
    }
  }
});

If you have a fixed Top Bar, you can edit this line:

 var containerPos = $(el).parent().offset().top - $('.top-bar').height();

It's working on Foundation 5.4.3.

Cheers!

Marc McGee almost 5 years ago

Hassan's solution works fine for me.

Assuming that the F5 callback option should be used, how would you merge
the following with Jordi's solution?

          $(".accordion dd").on("click", "a:eq(0)", function (event)
      {
        var dd_parent = $(this).parent();

        if(dd_parent.hasClass('active'))
          $(".accordion dd div.content:visible").slideToggle("normal");
        else
        {
          $(".accordion dd div.content:visible").slideToggle("normal");
          $(this).parent().find(".content").slideToggle("normal");
        }
      });