Accordion pushing title up instead of opening content down

[carloposo]

Hi,
I've implemented Section with Tabs. It automatically switch to Accordion on mobile, which is super awesome.

What I noticed when testing my website on mobile (but maybe it's just me) is that when I click on a title to open the corresponding content, the title is pushed up, forcing to scroll up at the top of the content to start reading.

Is it just me, or is this the desired behavior?

Carlo

[alokjethanandani]

hey @carloposo that's weird, and it's not default behavior. check out on your mobile deivce. the content isn't pushed up. http://foundation.zurb.com/docs/components/section.html#panel1. pls check your markup and css. look at the inspector. maybe there is an unclosed tag somewhere or you might have a negative margin on some element. if you're still experiencing this issue after looking into, feel free to open up this issue again. i'll close it for now. thanks!

[driesderoeck]

I was having some trouble with the scrolling behaviour of the accordeon sections a while ago too. I tried to explain the issue on the zurb foundation google group (https://groups.google.com/forum/#!topic/foundation-framework-/gS0TUjiEaxY).
There is a little test page I set up to test the issue, but it is still showing odd accordeon behaviour (i.e. the section title does not scroll to the top on clicking). The testpage can be found at : http://roeckoe.be/test/

[carloposo]

@alokzurb uhm, I have the same issue on http://foundation.zurb.com/docs/components/section.html#panel1
@driesderoeck have you tried the solution I wrote on GGroups? This worked for me:

$(document)
.foundation('section', {
callback: function (){
var containerPos = $('#myaccordioncontainerid .active').offset().top;
$('html, body').animate({ scrollTop: containerPos }, 600);
}
})

[alokjethanandani]

@driesderoeck ah i see what's going on. I looked at your markup for sections and I found that you were missing a couple of things.

YOUR CODE:
https://snipt.net/alokzurb/github-2578/

DOCS:
https://snipt.net/alokzurb/github-issue-2578/

Set "deep_linking: true;". Remove the callback function.

YOUR CODE:
https://snipt.net/alokzurb/github-issue-2578-1/

DOCS:
https://snipt.net/alokzurb/github-issue-2578-2/

---

You are missing the equal sign on: a href="#1". I would give the sections an identifiable name also, instead of just calling it 1. You are also not setting any of the sections to "active" which means there is not default section that opens on document load. Finally you are missing data-slug="panel1" in the content div. Make sure the data-slug name is the same as the anchor tag.

@carloposo try enabling deep_linking and follow the steps I mentioned here to fix your problem. Once deep_linking is enabled the anchor tags will push the browser window down to where the anchor tag is set. Let me know if this helps. I'll close this issue, but feel free to open it if this doesn't solve your problem. Thanks!

[carloposo]

@alokzurb I am really sorry, but that doesn't fix it for me. could be because my page is much more complex and it's using many plugins and stuff that might interfere with Section. So I'll wait for @driesderoeck's answer. What does the "one_up" variable do?

[alokjethanandani]

@carloposo sorry to hear that it didn't fix your specific problem. feel free to share a link to your prototype and supporting code.

@driesderoeck let me know if the solution i mentioned fixes your problem. thanks!

[driesderoeck]

@alokzurb ok, thanks for checking it out - it is working now, but I still needed to put in additional id="" arguments for it to scroll to the actual section. I can't seem to get it to work using only the data slugs and "deep_linking: true". It might be because I'm forcing it to be an accordeon using

<div class="section-container accordion" data-section="accordion" data-options="deep_linking: true">

Just two versions to compare the behaviour:
Using id's : http://roeckoe.be/test_ids
Using data slugs : http://roeckoe.be/test_dataslugs

@carloposo I'll have to look into the callback stuff again, last time I tried I couldn't get it to work - but that was before your reply to that post so it seems. Thanks for pointing that out, I'll give that another try.

[alokjethanandani]

Hey @driesderoeck you forgot to add the data-slug. The slug name should be the same as the anchor link without the # mark. See below:

div class="content" data-slug="panel1" data-section-content

[alokjethanandani]

FYI. You've added it to the second section but not the first.

[driesderoeck]

Thanks for pointing out the error, but after changing it - the scrolling behaviour is still not as intended. The page seems to scroll up to the top, instead of to the beginning of the section (as it is the case in the version using id's). I tried changing the section-container to auto

<div class="section-container auto" data-section data-options="deep_linking: true;">

but getting similar behaviour for now

[alokjethanandani]

Interesting. I'll suggest this to the developers. For now try using @carloposo custom script.

$(document)
.foundation('section', {
callback: function (){
var containerPos = $('#myaccordioncontainerid .active').offset().top;
$('html, body').animate({ scrollTop: containerPos }, 600);
}
})

[seantimm]

Thanks for the report! I'm going to close this issue in favor of #2938 which has a great visual demonstrating the problem and expected behavior. Hopefully we'll get this resolved shortly!