Accordions in mobile view

Support
#1

I have used the code below you gave me for many months to close accordion screens on mobile view. Now it has stopped working, could it be due to one of the updates?

#2

Hi There,

Thanks for writing in! I have created a private test page and tested accordion functionality on mobile, but I could not experience such issue (see secure note).

Could you please confirm on your end as well. Also provide us with the URL to the page that you’re experiencing this issue.

Thanks!

#3

That did not work on my iphone, accordion stayed open. I have cleared the cache but did not change anything. This is happening to all pages but try this as an example https://www.gunstocarry.com/gun-laws-state/gun-laws-florida/

#4

So the accordions are closing in mobile view on your phone?

#5

Hi there,

I am not sure about the previous code is given, but that should not be the way you force the accordion to be closed.

The correct way is that you use the new Accordion element instead of the Classic accordion. In each accordion option there you can find an option to select whether you want to have the accordion item opened or closed:

Now if you want to have the accordions opened in the desktop and closed in the mobile, You can add the Accordion element and set proper options for the desktop. Then duplicate the same element and this time set it to close. Then use the hide based on the breakpoint options to hide one in desktop and show in mobile and vice versa.

The method above will be bulletproof and will not break in the future updates in contrary to the custom codes that might break.

Thank you.

#6

Thanks will start implementing your suggestions.

#7

Just one more question, I would like to have the accordion header background colored black with white text, same as classic ones I have setup. Do you have any info on how I would customize the accordion?

#8

OK, figured that out. I would like to keep the text that was in the classic accordion headers. Can you please tell me the font name and if its bold, size etc. thanks

#9

Glad you’ve sorted it out :slight_smile:

#10

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