A simple accordion component for Tailor.**
Please note that Tailor Accordion requires the Tailor Framework to function correctly.
To add Tailor to your project you'll need to sign into the Gateway Interactive npm account using $ npm login
. The credentials for the account are stored in 1Password.
Then run:
$ yarn add @gateway-interactive/tailor-accordion --save
Then open your primary scss file and import Tailor Accordion AFTER your Tailor import.
@import "path_to/node_modules/\@gateway-interactive/tailor/tailor",
"path_to/node_modules/\@gateway-interactive/tailor-accordion/tailor-accordion";
Next you'll need to add markup for the accordion. You can use the example below as a guide. Please note that by default Tailor Accordion uses Font Awesome icon for the chevron. Please make sure you've imported Font Awesome into your project or the icons will not render.
<div class='accordion'>
<div class='accordion-item'>
<div class='js-accordion-toggle accordion-title'>
<i class='fa fa-chevron-right'></i>
Accordion Title
</div>
<div class='accordion-content'>
<p>Accordion Body. This paragraph tag is not required, you can have whatever markup you want in the body of the accordion.</p>
</div>
</div>
<div class='accordion-item'>
<div class='js-accordion-toggle accordion-title'>
<i class='fa fa-chevron-right'></i>
Another Accordion Title
</div>
<div class='accordion-content'>
<p>Accordion Body. This parag
</div>
</div>
</div>