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