How do I open an accordion with an anchor link
I am trying to do this on the FAQ page here:
https://www.diamondchemistry.com/pages/frequently-asked-questions-faqs such that when someone clicks on the anchor link: https://www.diamondchemistry.com/pages/frequently-asked-questions-faqs#so-tab-1, it opens up the accordion.
Thanks for your help!
The JS code for this is not very complex.
You can add it right above the tag like so:
This will run once on page load, check if you have a hash portion in the url, whether there is an element with matching id in your page and if its property name is ‘tabs’, then scroll it into view and “click” it to open.
The code will also listen for hash changes in case you would like to cross-reference tabs on the same page.
Thanks Tim, the current html code is put in like this. It does have a matching ID, and the URL has a #portion. There is no body tag. And the code you suggested above is not responding.
### General Questions
ABCD is ABCD
DEFG is DEFG
The tag should be in your Layout theme.liquid.
You can definitely put a portion of my code right above or below your …
If this does not work, it’d be nice to see a preview link if you’re doing it in a draft theme.
Hi Tim, it works as a functionality Thank you.
For some reason though it is pushing the scroll bar down slightly such that you dont see the Question (“What is ABCD”) but only the answer to it. Check it in the following examples:
https://www.diamondchemistry.com/pages/frequently-asked-questions-faqs#so-tab-22
https://www.diamondchemistry.com/pages/frequently-asked-questions-faqs#so-tab-10
https://www.diamondchemistry.com/pages/frequently-asked-questions-faqs#so-tab-15
Great!
The problem you’re seeing is because of the sticky header (which was not switched on initially If I remember properly).
When browser scrolls element into view it does not account for sticky/fixed header, so the top of the element end up hidden below it.
But this is something we can take care of, for example, like this:
Thanks Tim - I understand your explanation on sticky header. Thank you for your help so far. I have added the code in the liquid theme, and it opens the accordion but does not seem to work on the the exact positioning because of the sticky header.
https://www.diamondchemistry.com/pages/frequently-asked-questions-faqs#so-tab-22
https://www.diamondchemistry.com/pages/frequently-asked-questions-faqs#so-tab-10
https://www.diamondchemistry.com/pages/frequently-asked-questions-faqs#so-tab-15
Yes, but looks like you’re still using the initial version of my code, not the updated one.
Hi Tim, Let me know if you have a solution for this. @tim_1
It looks like sometimes the suggested code runs too early and something (browser itself/theme code/apps – hard to tell without extensive debugging) resets scroll position later.
I’d try the following – instead or running the checkAccordion immediately, do it a bit later.
Works perfectly. Thank You!