-
Hi there,
I’m trying to accomplish a “product selection wizard” with multiple accordions within each other. So far this works out quite good. However the last accordion isn’t always expanding properly. The content will be somewhat cropped. It doesn’t happen all the time. If I reload the page and just “play” with the last accordion item it works fine. But if I open and close other accordion items and then try to open the last item (and its accordions) it sometimes does this wrong behavior.
To me it looks like a bug or maybe an error of my site setting the accordions up. Any thought on that?
Here the link to the page: https://de.aqua-nobilis.com/hilfe/auswahlassistent/
Thanks in advance for your help!
Kind regards,
Laurent -
Update: It’s not just happening for the last item, it not also happens for the 2th last = 3 item…
-
Oh yeah and I’ve added this script so that all the accordions are closed when the page is loaded:
<script> var ulArr = document.getElementsByClassName('gb-accordion__item'); for (var i = 0; i < ulArr.length; i++) { ulArr[i].className = ulArr[i].className.replace('gb-accordion__item-open',''); } var ulArr = document.getElementsByClassName('gb-accordion__toggle'); for (var i = 0; i < ulArr.length; i++) { ulArr[i].className = ulArr[i].className.replace('gb-block-is-current',''); } </script>Maybe that’s interfering with the accordions?
Cheers,
Laurent -
Hi there,
You don’t need the JS because the accordion should be closed by default. What happens if you remove the code?
-
Hi Alvind,
thank you for your quick response.
Done! You can have a look at the site.
In that case every first item of each accordion is opened.
That’s why I added this bit of code.Kind regards,
Laurent -
Hi there,
if you select the first accordion item, and in its block settings you can uncheck the Item Open by Default option. See here:
-
Hi David,
thanks for your response!
Oh gosh that was too hidden for me. The solution with JavaScript was faster 😉
I now changed it according to your recommendation and the accordions are of course all closed.
So I can leave away my JavaScript snippet, but the problem with the accordions not opening 100% still exists.Please see this screenshot as an example:
Thanks in advance for further clarification.
Kind regards,
Laurent -
but the problem with the accordions not opening 100% still exists.
which one does not open?
-
Hi Ying,
I’ve seen the problem with some that where in item number 3 and 4 of the first hierarchy. But I didn’t recognize a pattern so far. Feel free do “play around” a little yourself. After a few seconds you should be able to reproduce the error.
As you can see in the screenshot, it’s that parent accordion that doesn’t open enough to see the content of the inner accordions.
Browser being Firefox, if that is of relevance…
Kind regards,
Laurent -
Update it now also happened in the first item.
-
Eh…I can’t replicate the issue, I tried to open every accordion item in the 1st, 3rd and 4th items, and they all opened…
Any chance you can write down the steps to replicate the issue?
-
Hi again,
for example try opening them in this order:
- 1.
- 2.
- 2.1.
and should get the error already.
When you then open- 1.
- 2.
again, the problem is gone. But reappears later, if you continue opening and closing other accordions.
Hope this helps.
Kind regards,
Laurent -
That could be due to the deeply nested accordion. I suggest replacing the last nested accordion with tabs instead. Would that work for you?
-
Hi Alvind,
thanks for your reply.
Well I could give it a try.
But I’d like to stick with the accordions, to not confuse our customers too much.
I’ll duplicate the page and see if with less layers the problem disappears at some point.Kind regards,
Laurent -
Tests done.
I now only have two layers of accordions and the problem still persists.
https://de.aqua-nobilis.com/auswahlassistent-test/I found some kinds of pattern for the error:
- 1. -> 2. -> 2.1.
- 2. -> 3. -> 3.1.
- 3. -> 4. -> 4.1.
- 1. -> 2. -> 3. -> 3.1.
- 2. -> 3. -> 4. -> 4.1.
- 1. -> 2. -> 3. -> 4. -> 4.1.
These sequences will give you the error, but only if you don’t “close the accordions manually”.
The other way around 2. -> 1. -> 1.1. will not lead to an error.
Likewise if you do 1. -> 1.1. -> 2. -> 2.1. everything will work just fine.
But doing 1. -> 1.1. -> 2. -> 2.1. -> 3. -> 3.1. will again reproduce the error, but not consistently, only about 50% of the time… 😉To me this seems to be some kind of bug in your code. Is there any possibility that one of your developers takes a look at this? Because just randomly trying this might not be the most effective way of solving this problem…
Thanks in advance for your help!
Regards,
Laurent -
Hi there,
i can replicate the issue locally – and i have opened a git issue for it.
In tbe meantime try adding this script to the site footer:
<script> document.addEventListener('DOMContentLoaded', () => { // Select all elements with the class gb-accordion__toggle const toggles = document.querySelectorAll('.gb-accordion__toggle'); toggles.forEach(toggle => { toggle.addEventListener('click', () => { let parent = toggle.parentElement; // Traverse up the DOM tree to find the nearest gb-accordion__content while (parent && !parent.classList.contains('gb-accordion__content')) { parent = parent.parentElement; } // If we found a gb-accordion__content ancestor, remove its max-height style if (parent && parent.classList.contains('gb-accordion__content')) { parent.style.maxHeight = ''; } }); }); }); </script>
- You must be logged in to reply to this topic.