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
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
