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.

Accusantium lacinia quis! Nascetur quaerat laborum? Malesuada, senectus accusamus iste tristique hendrerit ad dolorem praesent turpis rem ipsam aliqua volutpat doloremque? Amet occaecati officia vehicula qui blanditiis duis arcu lacus incididunt scelerisque dolor consequatur exercitation fermentum cillum elementum reiciendis diamlorem.

Cupidatat autem eget voluptates ea nemo veritatis nostra? Incididunt nihil, occaecat? Nostrum, delectus nonummy elit, varius urna ex, quos! Pharetra. Quibusdam. Condimentum quam architecto, sapiente quisque porta, provident purus reiciendis pharetra nostrud sint mi aliquip! Posuere? Maxime quo ultricies faucibus.

The Recipe

There are only a couple of settings needed to make this work correctly.

  1. Add a toggle
  2. Assign the class “vac-additional-info” (change the “vac-” to match your naming convention)
  3. 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.

screenshot of the toggle settings

Image has been modified to show the three main settings

Copy to Clipboard