Recreate Gym Demo Accordion

I’d like to implement an accordion on my website with the same styling at the accordion on the gym demo under summer classes.

My accordion is Navy background on the accordion title, then grey on the background when opened. I’d like it to be white with black text just as the Gym Demo. Or if it’s possible just to post the shortcode for the gym demo with the styling that would be excellent and I’ll be able to take it from there.

Here’s what the accordion currently looks like with my current styling:

Thanks for your help. I’m using classic editor.

Hello @JK2013,

Thanks for writing to us.

You can style the accordion the same as the gym demo. Please have a look at the given video in the secure note. You can also check our accordion documentation as well.

If it doesn’t work for you, please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password
  • Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

I’m using shortcode not cornerstone for the page. I have not posted the accordion on the page yet because I can’t get the styling part situated using shortcode. Could you send over the code for the gym demo? I can edit the shortcode from there. Thank you for your help.

Hello @JK2013,

Regretfully, the new Accordion element does not have a shortcode. It can only be used within the Cornerstone builder. It is best that you edit your Contact Us page using the Cornerstone Builder. You can start by using this template from the Gym Homepage: https://www.dropbox.com/s/da5imdsk3okx4tu/gym-homepage.tco?dl=0

If you are not familiar with the Template Manager yet, please check this out:

Best Regards.

Where can I modify the display & style of accordions, and how can I do it, without using cornerstone? I was hoping to implement accordions throughout my website. My concern with cornerstone is it may cause some things on the website to stop working. Thanks for your help.

Hello @JK2013,

If you use the Classic Accordion, all of its styling will be depending on the built-in and unique design in each stack. Regretfully there is no option in the theme where you can style and modify the accordion element. It will only be possible if you create your custom accordion element or use custom CSS coding which is beyond the scope of our support already.

Thank you for you understanding.

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