Menu icon Foundation
Accordion problem

Having a small issue with the accordion element and can't seem to fix it (Foundation 5.x). On the following page the accordion element mostly works fine (scroll down the page until you reach "Kostnader", "Laerer" and "Elevatealelser").

http://solborg.fhs.no/global-village-connection/

Opening or closing the accordion by clicking on say "Kostnader" or "Laerer" works fine BUT not when clicking on "Kostnader", then scrolling down and then clicking on "Laerer". The page jumps too far down - so it appears the height is not being calculated correctly.

There is a little javascript extra taken from the following thread for an easing effect (and an open/close with CSS), but apart from that its a plain vanilla accordion and I haven't been able to figure this out. Any help appreciated, thanks!

http://foundation.zurb.com/forum/posts/492-easing-effects-for-top-bar,-accordion-and-tabs

$(document).ready(function() {
  $(".accordion").on("click", "li", function () {
    $("li.active").find(".content").slideUp("slow");
    if(!$(this).hasClass("active")) {
      $(this).find(".content").slideToggle("slow");
    }
  });
});
            

         

accordion

Having a small issue with the accordion element and can't seem to fix it (Foundation 5.x). On the following page the accordion element mostly works fine (scroll down the page until you reach "Kostnader", "Laerer" and "Elevatealelser").

http://solborg.fhs.no/global-village-connection/

Opening or closing the accordion by clicking on say "Kostnader" or "Laerer" works fine BUT not when clicking on "Kostnader", then scrolling down and then clicking on "Laerer". The page jumps too far down - so it appears the height is not being calculated correctly.

There is a little javascript extra taken from the following thread for an easing effect (and an open/close with CSS), but apart from that its a plain vanilla accordion and I haven't been able to figure this out. Any help appreciated, thanks!

http://foundation.zurb.com/forum/posts/492-easing-effects-for-top-bar,-accordion-and-tabs

$(document).ready(function() {
  $(".accordion").on("click", "li", function () {
    $("li.active").find(".content").slideUp("slow");
    if(!$(this).hasClass("active")) {
      $(this).find(".content").slideToggle("slow");
    }
  });
});
            

         
jstubbs almost 4 years ago

Foundation 5.5.3 version. Am I missing something regarding the default behaviour of the accordion element?

Clicking on either Laerer or Elevuttalelser after first clicking on Kostnader cause the page to scroll down...

jstubbs almost 4 years ago

OK I've figured out that the accordion is being thrown off by the contents of Kostnader - if I remove most of the content of that list item then the accordion behaves correctly, so it does seem that the amount of text is throwing it off.

I've checked accordion.js but don't see anything that might be setting the height of each item, although admitedly I don't really know javascript ;)

Hope someone might be able to take a look and see if its a bug or not...

Ian Daly almost 4 years ago

It seems to be working fine for me.

The problem is that the content in the first tab pushes the page really far down, and since you dont have as much content in the second tab it goes back to its original position further up the page.

You could change the order of the tabs from least to most content to help avoid this possibly.

jstubbs almost 4 years ago

Hi Ian,

Thanks for checking and for the reply. I figured out as much, but I'm wondering if this is the default/normal behaviour? Shouldn't the tabs open/close from the position of the anchor link panel div, in my case something like #panel1025?

<a href="#panel1025" class="text-center">Kostnader</a>
<div id="panel1025" class="content">

Maybe I'm just misunderstanding how its supposed to work..