Share on

Recently, I stumbled upon a video by Imran Siddiq of Web Squadron, where he showed how to create a horizontal accordion in Elementor with just CSS. It is something I have wanted to create for a while, so I thought I would try it in Avada. This took a lot of trial and error to get Avada to behave correctly, trim the CSS to just what is needed, and make it a very smooth implementation, but all in all, I am satisfied with this initial test. This is a desktop-only feature as it relies on the hover state, and I am still working on triggering the focus state to make it keyboard accessible

Once I get the focus issue resolved, I plan to try and use this with post cards element so the content can be auto-populated.

Originally published on Feb. 11, 2023

pollution during sunsetGoing Green-ish
MacBook Pro with images of computer language codesAdding Dynamic Data to a Toggle

One Comment

  1. Darrin Stern March 4, 2023 at 10:22 am - Reply

    Question, would you every post a video of how made this work, this is very cool.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    Customization | Layout

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Customization | Elements

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    Avada Challenge | Customization

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Adding Dynamic Data to a Toggle

    Adding Dynamic Data to a Toggle

    Avada Challenge | Elements

    Adding dynamic data to a toggle in Avada is easier than you think.

    February 12, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    Customization | General Posts

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Customization | Layout

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022