screenshot of a post card

While working on a recent project, I needed a way to add some dynamic data to a toggle in a post card. Avada’s toggle element allows dynamic data to be assigned to the title and the content, but what if you want multiple values from disparate data fields? It is much easier than I expected. As you are working on your post card, add the dynamic data into the body of the card, do all the styling you want, and then copy and paste them into your toggle content area. The shortcodes that Avada generates will be pasted into the content area. since these are shortcodes, editing can be a little tricky so I recommend saying these dynamic elements to your library so that you can edit them later.

Accessibility

screenshot of the interface using sr-only for screenreaders

Since you may be adding the toggle to a post card and it will be repeated multiple times on a page, you should make each toggle title unique so that it has meaning to those using screen readers. The easiest way to do this is to add your repeated text before or after the dynamic value and wrap the dynamic value with a span that has class=”sr-only” assigned.

Originally published on Feb. 12, 2023

Horizontal Image Accordion
Person working with their laptop and some color samplesMoving away from builder settings

Leave a Reply

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

RELATED ARTICLES

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    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 Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Using Avada Elements in the Block Editor

    Using Avada elements in the block editor to optimize tips and tricks.

    October 29, 2022

  • Read Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

    September 25, 2022

  • Read Buttons, buttons, and more buttons

    Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

    August 24, 2022