Author: | YurySosnov |
---|---|
Views Total: | 103 views |
Official Page: | Go to website |
Last Update: | August 3, 2023 |
License: | MIT |
Preview:

Description:
A tiny JavaScript library that helps you create responsive collapsing accordion elements using plain JavaScript and CSS. Ideal for FAQs, tabs, and show/hide UIs.
The accordion library leverages the benefits of CSS Flexbox for fluid layout control, coupled with CSS3 transitions and transforms to deliver sleek expand/collapse animations.
How to use it:
1. The required HTML structure for the accordion UI.
<div class="vnl-accordions"> <div class="vnl-accordions-item"> <h3 class="vnl-accordions-title">FAQ 1</h3> <div class="vnl-accordions-content"> <p> Answer 1 </p> </div> <div class="vnl-accordions-action"></div> </div> <div class="vnl-accordions-item"> <h3 class="vnl-accordions-title">FAQ 2</h3> <div class="vnl-accordions-content"> <p> Answer 2 </p> </div> <div class="vnl-accordions-action"></div> </div> ... more FAQ here .. </div>
2. Download and load the vanilla-accordions.js script at the end of the document.
<script src="js/vanilla-accordions.js"></script>
3. The example CSS for the accoridon.
.vnl-accordions { display: flex; flex-direction: column; gap: 1rem; --tw-bg-opacity: 1; background-color: rgb(57 54 70 / var(--tw-bg-opacity)); padding: 1rem; --tw-text-opacity: 1; color: rgb(127 132 135 / var(--tw-text-opacity)); font-family: 'Lato', sans-serif; } .vnl-accordions-item { position: relative; cursor: pointer; border-radius: 0.5rem; border-width: 1px; border-color: transparent; padding-left: 0px; padding-right: 0px; padding-left: 1rem; padding-right: 4rem; } .vnl-accordions-item:hover { background-color: rgba(0, 0, 0, .1); } .vnl-accordions-item.active .vnl-accordions-title { --tw-text-opacity: 1; color: rgb(236 179 101 / var(--tw-text-opacity)); } .vnl-accordions-item.active .vnl-accordions-content { max-height: 900px; } .vnl-accordions-item.active .vnl-accordions-action { transform: rotate(45deg); } .vnl-accordions-item.active .vnl-accordions-action:before, .vnl-accordions-item.active .vnl-accordions-action:after { --tw-bg-opacity: 1; background-color: rgb(236 179 101 / var(--tw-bg-opacity)); } .vnl-accordions-title { margin-top: 1rem; margin-bottom: 1rem; font-size: 1.875rem; font-weight: 300; } .vnl-accordions-content { overflow: hidden; max-height: 0; transition: max-height .25s; } .vnl-accordions-content p { margin-bottom: 1rem; line-height: 2; } .vnl-accordions-action { position: absolute; top: 1.75rem; right: 1.75rem; display: block; height: 1.25rem; width: 1.25rem; transition: transform .3s; } .vnl-accordions-action:before, .vnl-accordions-action:after { position: absolute; display: block; width: 100%; --tw-bg-opacity: 1; background-color: rgb(127 132 135 / var(--tw-bg-opacity)); content: ''; height: 1px; left: 50%; top: 50%; } .vnl-accordions-action:before { transform: translate(-50%, -50%); } .vnl-accordions-action:after { transform: translate(-50%, -50%) rotate(90deg); }