Additional Information Toggle

This is a CSS snippet for creating an Avada toggle with the icon next to the title but maintaining full-width clickability. Simply assign the class to the accordion, set bordered to off, and the dividing line to off.

:root{
 --spacing-xxs:2px;
  --spacing-xs:.25rem; /* 4px */
  --spacing-sm:.5rem; /* 8px */
  --spacing-md:1rem; /* 16px */
  --spacing-lg:1.5rem; /* 24px */
  --spacing-xl:2rem; /* 32px */
  --spacing-2xl:3rem; /* 48px */
  --spacing-3xl:4rem; /* 64px */
  --spacing-4xl:5rem; /* 80px */
}
.vac-additional-info .fusion-toggle-icon-wrapper{
  display:none;
}
.vac-additional-info .panel-title a > span.fusion-toggle-heading{
  display: inline-block;
  border-bottom:1px dotted var(--awb-custom_color_3);
  width:max-content!important;
  margin-left:0;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}
.vac-additional-info a .fusion-toggle-heading::after{
  display: inline-block;
  position: absolute;
  border-bottom:0!important;
  font-family:"Font Awesome 6 Pro";
  color:var(--awb-custom_color_3);
  margin-left:var(--spacing-sm);
  font-size:.8rem;
  font-weight:900;
}
.vac-additional-info a[aria-expanded="false"] .fusion-toggle-heading::after{
  content:"\f078";
}
.vac-additional-info a[aria-expanded="true"] .fusion-toggle-heading::after{
  content:"\f077";
}