I have an accordion with seven content elements. The elements behave correctly when opened in most cases… unless an element several below a currently opened element is opened.
For example, using the provided link: Open “Why Not Use a Free Solution?” Then, open “How Does This Work.” The page scrolls so that the beginning of the content for “How Does This Work” is not visible (you have to scroll up to get to it).
This doesn’t seem to happen when consecutive / adjoining elements are opened. And obviously, the behavior is a sub-optimal user experience.
Hi Matthew,
as far as I can see it is not a bug. The behavior is caused by the top item closing, reducing the height. This is also the case with items that follow each other directly, depending on your scroll position and the length of the content.
The only way around this is to enable “behave like tabs”. This way the height is preserved.
Hmmmm… well, if it’s not a bug, it’s certainly not a great user experience. When you click on a FAQ entry, you expect to begin reading the beginning of the answer to the question, not the middle of the answer to the question. The Bricks accordion working exactly like Bootstrap doesn’t necessarily mean it’s as good as it can be. Any thoughts on a workaround while still maintaining the accordion use (not converting to tabs, which have their own issues)?
I had a similar thing I think, I ticked independent toggle to make it stop scrolling into the footer when accordions were opened up. Is there no option in Bricks to had the others close when a new one is opened? It doesn’t seem to work like that does it?
Oddly it only scrolls to the footer position if another one was open, regardless of how much content was in it. I was using perfmatters as well with this, I wonder if that ‘could’ have an impact on the accordion Js if it gets deferred? It did seem 100% like the scroll posiiton as this OP mentions though.
I’ve moved it how it was before to this pw protected page, password: bricks Bricks Private - Lifeworks - oddly, it works!
The only difference was this was on an single CPT post page before (job) and pulling in ACF data, which is seemingly what was causing the problem there. Have you tried accordions, on a single page (CPT or post) and then pulling in ACF textarea data input in those posts and tried the accordions?
Also, a screenshot of the settings on the private one:
No, of course not That’s why we always ask for as many details as possible to be able to reproduce the problem. Anyway: even with this, I have no problems at all (within a custom post type and ACF Textarea fields):
Please disable your plugins and custom code. This is the only thing that could affect the accordion behavior.
Hmm, that is REALLY strange but thanks for testing it. I have it working as you saw just like you do there, with the same plugins and everything. It was purely when I had the ACF content coming in that I saw it starting to break, so it makes it more confusing why a plugin would affect just that, other than the ACF one.
The Bricks accordion working exactly like Bootstrap doesn’t necessarily mean it’s as good as it can be. Any thoughts on a workaround while still maintaining the accordion use (not converting to tabs, which have their own issues)?
That’s why we always ask for as many details as possible to be able to reproduce the problem. Anyway: even with this, I have no problems at all (within a custom post type and ACF Textarea fields):