As part of my normal day-to-day, I often need to add extra content that is secondary to the main content, but I don’t want to show it by default. As part of the VA.gov design system, there is an additional info accordion that is perfect for this. I went ahead and created an Avada version. The biggest issue was keeping the full width of the title space clickable while pulling the icon close to the text.
Generally speaking, as a best practice, this should not be used for important information or long content.
The Recipe
There are only a couple of settings needed to make this work correctly.
- Add a toggle
- Assign the class “vac-additional-info” (change the “vac-” to match your naming convention)
- If they are not your defaults:
- set boxed to off
- set divider to off
- set the icon to the left
You will notice in the CSS I have some variables for spacing, and I use the awb-color6 as my secondary color, so these may need to change to match your design. Likewise, background colors (hove r and active), and other settings can be changed to match your style. If you want to change the icons, you will need to refer to Font Awesome to get the correct unicode value. Speaking of Font Awesome, I use the latest version which in not part of Avada but the CSS example references the older version that Avada uses.

Image has been modified to show the three main settings