Accordion element UX issue on mobile - PRO Cornerstone 6.0.5

Support
#1

Hi, team.
I am building a site for an agency and found a behavior that seems bug-like to me.
Trouble comes from an accordion, I bent a number of things successfully but this seems out of my reach.
This behavior does not seem to come from any of these small customizations.
I dived looking for answers or hints, not lucky enough.

Website needs tokenized URL to enter in staging, so I will share it as a secure note.

DETAILS
See the effect on the video:

“Transcript” to the issue, please proceed as listed:

  • Use menu or scroll down to Services.
  • Find 1st accordion item (already open as expected) Content Marketing.
    Keep reading downwards to 1st item end (image).
  • Find 2nd accordion item header (item collapsed as expected), Social Media and Community Management.
    Click/Tap on the collapsed 2nd item’s header to read it. There comes an instant scroll down throwing user completly out of the document flow, ruining usability on mobile devices.

There is no more solution than scrolling up manually assuming that visitors will understand what happened, which is unlikely.

Intuitively I may expect the 2nd accordion item (header) to stay at its present Y distance and simply unfold its content downwards, where any user will expect to find it and keep reading.
At most, there might be an auto-scrolldown to stop when header (2nd item) hits top of the viewport.
Just an oppinion…

I am using latest Cornerstone on PRO 6.0.5 Renew stack, child theme. Happy to see Cornerstone/PRO growing, after some -in progress- mindset readjusting to the new environment.

Can you please take a look and assess yourselves on this issue? Maybe I missed a simple setting or any easy win on this…

Thank you very much

#2

Hey Ricard,

I believe your Accordion Grouped option is On. Grouped accordions is best used on desktop as only one accordion item will display. The others are collapsed. If you open an item, the rest will collapse. If you view that on mobile, your page will surely jump like in your video as the accordion item above collapses. Please turn Off the Grouped option of your Accordion

image

By the way, the URL you shared leads to a broken page.

image

Hope that helps.

#3

100%, Christian :nerd_face: grouped off was the cure for mobile.
Now the worst I can face is to handle 2 versions of the same accordion, so larger viewports can have auto-collapse (grouped on). Sorry server was down by then, missunderstanding with my client.
Thank you!

#4

Hi Ricard,

Unfortunately, you need to add two different accordions for Desktop and Mobile in this case.

Thanks

#5

Thanks @tristup, not a big pain having those 2 :+1:

#6

You’re welcome, Ricard.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.