Accordion Snippet

The accordion snippet organizes your content into vertically stacked tabs. Each tab includes a title and can be expanded to reveal the content associated with that tab. 

Options:

1.  Choose Accordion Style from the dropdown. 

2.  Add an anchor if  you need to link directly to the accordion item (do not use spaces or special characters) or If you have more than one accordion snippet on the page.

3.  Add an icon to an accordion item. 

  • Choose your icons: 
  • Paste only the icon class name. Example:  fas fa-exclamation-circle 

accordion



Accordion with light background

Accordion style - "with light background"

​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.


Basic Accordion

Accordion style - "basic"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

 

Accordion with icons

Accordion style - "larger"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.



Accordion with blue background

Accordion style - "with blue background" or "default"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius ipsum nec mauris luctus, vel vestibulum tellus placerat. Cras tristique ornare mauris, non tincidunt nulla. Quisque neque quam, tempus at placerat sit amet, posuere in urna. Nam varius ante ut commodo eleifend. Nunc at placerat tortor. Sed semper vitae risus eu egestas. Nullam a purus congue lectus volutpat consectetur a vel ante. Morbi dictum consectetur nunc, in euismod velit sodales eget. Duis id dictum augue, sit amet lobortis lectus. Sed porttitor luctus quam, sed hendrerit dolor pulvinar id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sit amet pulvinar lectus, at dignissim metus.