Basic Accordion
/*---------------------------------------------------------------------------
04-05 Accordions & Toggles (ACN)
---------------------------------------------------------------------------*/
/* Accordion FRAMEWORK 2024-05-27
-----------------------------------------------*/
*[class*="acc_container--"] { width: 100%; padding-bottom: var(--sp-rim); }
*[class*="acc_item--"] { position: relative; padding: 0.7rem 0; background-color:transparent; transition: var(--transitions) !important; border-bottom: var(--vern-line); }
*[class*="acc_item--"]:last-of-type { border: none; }
*[class*="acc_item--p"] { position: relative; padding: 1.5rem 0; }
*[class*="acc_item--"] .open_acc { background-color: transparent; }
*[class*="acc_item_question--"] { position: relative; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 1rem; }
/* Regular Title */
*[class*="acc_item_question--"] *[class*="acc_item_title"] { font-size: 1.2rem; font-weight: 700; line-height: 1.05; transition: var(--transitions); margin-bottom: 0; }
*[class*="acc_item_question--"] :hover*[class*="acc_item_title"] { color: var(--brand-clr-primary); }
.open_acc *[class*="acc_item_question--"] *[class*="acc_item_title"] { color: var(--brand-clr-primary); }
/* Heading Title */
*[class*="acc_item_question--"] .acc_item_title--heading { font-size: var(--h3-size); display: flex; width: 100%; justify-content: flex-start; align-items: center; text-align: left; }
*[class*="acc_item_question--"] .acc_item_title--heading:after { content: ''; border-top:var(--vern-line-em); margin: 0 0 0 20px; flex: 1 0 20px; opacity: 0; transition: var(--transitions_slower); }
.open_acc *[class*="acc_item_question--"] .acc_item_title--heading:after { opacity: 1;}
*[class*="acc_item_question--"] svg { transition: all 0.4s ease; align-self: start; font-size: 1.5rem; color: var(--clr-2); }
*[class*="acc_item_question--"]:hover svg { transform: scale(1.125); color: var(--brand-clr-primary); }
.open_acc *[class*="acc_item_question--"] svg { transform: rotate(-45deg); color: var(--brand-clr-primary); }
.open_acc *[class*="acc_item_question--"]:hover svg { transform: scale(1.125) rotate(-45deg); }
*[class*="acc_item_answer--"] { position: relative; display: none; padding-top: .75rem; }
*[class*="acc_item_answer--p"] { padding-top: 1.5rem; }
.acc_item_answer_inner { opacity: 0; transition: var(--transitions_slower); }
.open_acc .acc_item_answer_inner { opacity: 1; }Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus mi in aliquam dapibus. Mauris sollicitudin gravida posuere. Vivamus rhoncus semper mi non dapibus. Sed at neque ultricies, ornare leo id, posuere turpis. Sed quis est eu sapien blandit fermentum. Ut et diam mauris. Nullam lacinia dui dolor, non auctor diam tincidunt vel. Nunc ac felis bibendum, tempor odio vel, vestibulum nibh.
Sed faucibus mi in aliquam dapibus.
Fusce sodales felis ut sapien placerat auctor. Fusce posuere viverra nibh eu maximus. Vivamus vel erat ut augue tincidunt varius. Mauris vel massa a turpis vehicula pellentesque. Maecenas sit amet dui vel leo sodales ultricies a ut diam. Suspendisse semper eros enim, nec ornare mi commodo nec. Pellentesque vehicula massa id nisl feugiat volutpat. Nunc vehicula ullamcorper sem, eu convallis mauris pharetra commodo. Proin consequat facilisis porta. Sed nibh ante, facilisis in sem in, commodo maximus augue. Praesent iaculis malesuada metus, a vulputate massa mattis nec. Sed commodo condimentum ligula in ornare. Morbi eu eleifend metus. Nunc vitae risus hendrerit, malesuada ante eget, fermentum lorem. In at elementum nibh.
Mauris sollicitudin gravida posuere.
Morbi suscipit in nisl vel vehicula. Nunc ultrices sapien tortor, lobortis facilisis neque scelerisque sed. Ut semper magna ut enim eleifend, et commodo odio fringilla. Duis vulputate finibus eros. Sed fringilla tortor justo, ut euismod tortor viverra eget. Aliquam erat volutpat. Donec non pulvinar lacus.
Vivamus rhoncus semper mi non dapibus. Sed at neque ultricies, ornare leo id, posuere turpis.
Duis odio elit, ornare eu dapibus sed, ullamcorper ut dolor. Pellentesque placerat vestibulum laoreet. Aenean et convallis nunc. Suspendisse interdum risus sem, congue molestie felis mattis posuere. Nullam consectetur vestibulum ipsum, in tempor sem pellentesque et. Etiam porttitor tristique tortor ut commodo. Vivamus dui eros, porta sit amet urna quis, sollicitudin laoreet ex. Vestibulum non ipsum et turpis venenatis varius. Nullam nulla justo, finibus in iaculis sit amet, blandit a sem. Aliquam nec augue leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis scelerisque orci sed fermentum.
Sed quis est eu sapien blandit fermentum. Ut et diam mauris. Nullam lacinia dui dolor, non auctor diam tincidunt vel.
Maecenas vehicula ut libero sed luctus. Suspendisse tempor facilisis sodales. Integer sit amet semper nisi. Pellentesque sit amet luctus quam, et molestie neque. Duis ultrices fringilla lorem, vitae aliquet tellus blandit sed. In magna metus, interdum eu mattis a, laoreet et arcu. Integer ut nulla ac lectus tincidunt laoreet id a lacus. Quisque ultricies risus non tempor mattis. Praesent quis faucibus erat.