Accordion

v0.0.0

The Accordion is a vertically stacked list of items. Each item can be "expanded" or "collapsed" to reveal the content associated with that item.

Add class .is-active to element with class vi-accordion__item op have an item open on page load. The item will also be open on page load when targeting the specific id of the item via a hash link. This way an item can be bookmarked or shared.

The following options are available via data-attributes:

data-autoclose [true|false*] if true, only one item is expanded at a time.
data-disable-hash-change [true|false*] if true, the hash in the address bar will not be updated.

* default settings

Content #

The Content Accordion shows a larger header and a clear +/- trigger. Associated content is displayed against an white background.

Link content in second panel

Butcher selfies flannel etsy cold-pressed microdosing try-hard leggings.

Toggle Butcher selfies flannel etsy cold-pressed microdosing try-hard leggings.

Viral mlkshk meh pour-over blog.

Tilde sartorial freegan polaroid ennui Narwhal kinfolk kogi yolo pork belly pop up cardigan chambray Bespoke put a bird on it freegan bitters helvetica locavore single origin coffee Brunch actually intelligentsia meh cleanse Blue bottle humblebrag yr Tumblr hashtag offal banjo pitchfork Occupy chartreuse mlkshk godard jean shorts Celiac brunch ugh cardigan banjo selfies williamsburg Fixie umami helvetica neutra tofu microdosing Tumblr selfies trust fund aesthetic

Franzen viral taxidermy beard narwhal literally readymade vinegar.

Toggle Franzen viral taxidermy beard narwhal literally readymade vinegar.

Ennui cornhole letterpress pbr&b.

Goth bicycle rights shabby chic waistcoat Direct trade chicharrones salvia Cleanse sartorial crucifix chartreuse paleo Ethical street portland Fashion axe tote bag neutra portland church key godard Plaid gastropub freegan gentrify synth banh mi chartreuse tousled Pinterest keytar stumptown franzen Helvetica pinterest tattooed Park you probably haven t heard of them portland poutine street deep v migas Asymmetrical biodiesel ramps five dollar toast kitsch lumbersexual church key roof Jean shorts direct trade muggle magic Williamsburg kombucha drinking art party bicycle rights fingerstache venmo

Chillwave neutra synth brooklyn pug lomo yolo butcher.

Toggle Chillwave neutra synth brooklyn pug lomo yolo butcher.

Meditation try-hard master sartorial flexitarian.

Meditation chartreuse migas semiotics cold pressed 8 bit venmo meditation ugh kinfolk Goth irony 8 bit bespoke Thundercats muggle magic kombucha tilde forage biodiesel Organic selvage ugh cornhole humblebrag taxidermy fingerstache Green juice fixie tumblr 90 s Letterpress irony kogi 90 s wes anderson park retro vegan Ethical vinyl austin cardigan letterpress drinking synth deep v Actually helvetica skateboard raw denim craft beer slow carb

Retro squid flexitarian chia.

Pinterest hammock banh mi Readymade carry vinegar keffiyeh echo salvia plaid letterpress Kickstarter irony swag mlkshk squid craft beer Ethical raw denim mixtape authentic synth deep v Franzen cornhole ethical selfies Listicle tousled phlogiston food truck cliche Biodiesel stumptown ethical master waistcoat chartreuse Pork belly shabby chic umami heirloom church key sriracha portland Banjo williamsburg selfies lumbersexual before they sold out Lomo meh swag dreamcatcher venmo plaid 3 wolf moon loko tumblr

Meditation stumptown mlkshk scenester.

Crucifix cred tacos forage chicharrones 90 s Pop up fanny pack vegan Distillery polaroid vegan cold pressed pinterest vinegar Shoreditch loko asymmetrical chia chicharrones forage 3 wolf moon beard You probably haven t heard of them next level park Aesthetic try hard gastropub 3 wolf moon truffaut brooklyn viral Beard muggle magic skateboard authentic waistcoat portland art party Kombucha photo booth muggle magic knausgaard flannel typewriter taxidermy pour over Synth bitters hammock iphone pug yuccie Fingerstache listicle cred readymade You probably haven t heard of them loko direct trade listicle ethical celiac pork belly pour over

Wolf chicharrones

<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="true">
  <div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-b3d03e">
    <div class="vi-accordion-content__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-12828c">Butcher selfies flannel etsy cold-pressed microdosing try-hard leggings.</h4>
      <a aria-controls="region-8e6798" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-b3d03e" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Butcher selfies flannel etsy cold-pressed microdosing try-hard leggings.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-12828c" class="vi-accordion-content__main vi-accordion__main" id="region-8e6798" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Viral mlkshk meh pour-over blog.</h3>
        <p id="sg-bb7e1e"><a href="#sample">Tilde sartorial freegan</a> <a href="#sample">polaroid ennui Narwhal</a> kinfolk kogi yolo <a href="#sample">pork belly pop</a> up cardigan chambray Bespoke put a bird on it freegan bitters helvetica locavore single origin coffee Brunch actually intelligentsia meh cleanse Blue bottle humblebrag yr Tumblr hashtag offal banjo pitchfork Occupy chartreuse mlkshk godard jean shorts Celiac brunch ugh cardigan banjo selfies williamsburg Fixie umami helvetica neutra tofu microdosing Tumblr selfies trust fund aesthetic</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-ea7958">
    <div class="vi-accordion-content__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-76c25b">Franzen viral taxidermy beard narwhal literally readymade vinegar.</h4>
      <a aria-controls="region-c2bbc9" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-ea7958" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Franzen viral taxidermy beard narwhal literally readymade vinegar.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-76c25b" class="vi-accordion-content__main vi-accordion__main" id="region-c2bbc9" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Ennui cornhole letterpress pbr&amp;b.</h3>
        <p id="sg-00b54b">Goth bicycle rights shabby chic waistcoat Direct trade chicharrones salvia Cleanse sartorial crucifix chartreuse paleo Ethical street portland Fashion axe tote <a href="#sample">bag neutra portland</a> church key godard Plaid gastropub freegan gentrify synth banh mi chartreuse tousled <a href="#sample">Pinterest keytar stumptown</a> franzen Helvetica pinterest tattooed Park you probably haven t <a href="#sample">heard of them</a> portland poutine street deep v migas Asymmetrical biodiesel ramps five dollar toast <a href="#sample">kitsch lumbersexual church</a> key roof Jean shorts direct trade muggle magic Williamsburg kombucha drinking art party bicycle rights fingerstache venmo</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-ace713">
    <div class="vi-accordion-content__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-e34041">Chillwave neutra synth brooklyn pug lomo yolo butcher.</h4>
      <a aria-controls="region-162984" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-ace713" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Chillwave neutra synth brooklyn pug lomo yolo butcher.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-e34041" class="vi-accordion-content__main vi-accordion__main" id="region-162984" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Meditation try-hard master sartorial flexitarian.</h3>
        <p>Meditation chartreuse migas semiotics cold pressed 8 bit venmo meditation ugh kinfolk Goth irony 8 bit bespoke Thundercats muggle magic kombucha tilde forage biodiesel Organic selvage ugh cornhole humblebrag taxidermy fingerstache Green juice <a href="#sample">fixie tumblr 90</a> s Letterpress irony kogi 90 s wes anderson park retro vegan Ethical vinyl austin cardigan letterpress drinking synth deep v Actually helvetica skateboard raw denim craft beer slow carb</p>
        <h3>Retro squid flexitarian chia.</h3>
        <p>Pinterest hammock banh mi Readymade carry vinegar keffiyeh echo salvia plaid letterpress Kickstarter irony swag mlkshk squid craft beer Ethical raw denim mixtape authentic synth deep v Franzen <a href="#sample">cornhole ethical</a> selfies Listicle tousled phlogiston food truck cliche Biodiesel stumptown ethical master waistcoat chartreuse Pork belly shabby chic umami heirloom church key sriracha portland Banjo williamsburg selfies lumbersexual before they sold out Lomo meh swag dreamcatcher venmo plaid 3 wolf moon loko tumblr</p>
        <h3>Meditation stumptown mlkshk scenester.</h3>
        <p>Crucifix cred tacos forage chicharrones 90 s Pop up fanny pack vegan <a href="#sample">Distillery polaroid</a> vegan cold pressed pinterest vinegar Shoreditch <a href="#sample">loko asymmetrical</a> chia chicharrones <a href="#sample">forage 3</a> wolf moon beard You probably haven t heard of them next level park Aesthetic try hard gastropub 3 wolf moon truffaut brooklyn viral Beard muggle magic skateboard authentic waistcoat portland art party Kombucha photo booth muggle magic knausgaard flannel typewriter taxidermy pour <a href="#sample">over Synth</a> bitters hammock iphone pug yuccie Fingerstache listicle cred readymade You <a href="#sample">probably haven</a> t heard of them loko direct trade listicle ethical celiac pork belly pour over</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Wolf chicharrones</a>
      </div>
    </div>
  </div>
</div>

The Content Accordion can also be used with an icon on the left

Link content in second panel

Park literally yuccie cray marfa typewriter paleo meggings.

Toggle Park literally yuccie cray marfa typewriter paleo meggings.

Sustainable flannel ramps loko irony.

Mumblecore portland semiotics meh chambray tofu blog forage Pork belly poutine flannel Leggings waistcoat park tofu butcher organic Letterpress pbr b freegan skateboard artisan Offal vinegar flannel pour over banh mi mixtape loko godard Synth loko ethical readymade polaroid truffaut pop up chillwave Thundercats green juice selfies pickled fashion axe Artisan blog scenester portland vhs humblebrag squid 3 wolf moon Dreamcatcher direct trade chambray helvetica Selvage phlogiston chillwave godard cleanse try hard farm to table cold pressed

Intelligentsia ethical chicharrones skateboard.

Pinterest shabby chic brunch kogi Retro truffaut deep v hammock Butcher paleo swag Flannel pickled letterpress diy cornhole Cardigan polaroid flexitarian Kinfolk tousled salvia pour over sartorial artisan microdosing Cred distillery fanny pack skateboard scenester diy Tattooed locavore cronut hella hoodie helvetica disrupt lumbersexual 3 wolf moon lumbersexual readymade art party meggings cleanse microdosing Biodiesel irony schlitz goth

Iphone cronut gentrify brooklyn meh.

Pork belly chia small batch pitchfork Kickstarter ennui loko irony diy meditation Freegan xoxo yolo fashion axe kitsch locavore cornhole 3 wolf moon hashtag chicharrones paleo readymade Pbr b sartorial pabst Normcore wolf chillwave hashtag Paleo iphone blue bottle kickstarter literally Plaid vhs brooklyn truffaut kickstarter literally Sriracha diy paleo bicycle rights knausgaard Single origin coffee keffiyeh five dollar toast bespoke Celiac meh normcore Direct trade truffaut seitan cardigan

Viral brooklyn authentic forage echo vinyl everyday ramps.

Toggle Viral brooklyn authentic forage echo vinyl everyday ramps.

Master twee sriracha taxidermy farm-to-table.

Austin marfa aesthetic health cred cornhole organic Goth gluten free drinking gentrify Umami post ironic green juice hella shabby chic single origin coffee Kinfolk iphone small batch blog chillwave deep v tacos pickled Bespoke paleo master blue bottle pork belly aesthetic 8 bit pop up you probably haven t heard of them viral Forage helvetica cronut kale chips Franzen normcore bicycle rights Trust fund plaid cronut helvetica retro Whatever brunch jean shorts kickstarter gluten free fingerstache seitan

Cliche shoreditch chambray chambray selfies.

Kombucha biodiesel keffiyeh cornhole kogi migas mustache before they sold out Bicycle rights lumbersexual master carry Tumblr food truck paleo bushwick cred offal Lumbersexual diy yolo knausgaard church key pitchfork before they sold out offal Viral tacos mlkshk Pour over intelligentsia keffiyeh truffaut iphone tousled Retro disrupt wolf pop up tousled jean shorts vhs Kogi typewriter literally bushwick heirloom vhs jean shorts Tilde iphone messenger bag selfies 8 bit try hard Sartorial iphone cardigan wayfarers cronut chambray Tousled five dollar toast you probably haven t heard of them thundercats lumbersexual yuccie Kogi distillery ethical whatever pinterest next level

Kinfolk slow-carb wolf cred.

Ramps pork belly meggings tousled mixtape selvage Salvia pickled austin meditation put a bird on it Blue bottle narwhal poutine farm to table lo fi sriracha hella Kale chips iphone bitters lumbersexual Literally godard tattooed mumblecore shabby chic before they sold out portland Tousled letterpress you probably haven t heard of them Iphone blog fixie skateboard small batch photo booth Banh mi hashtag knausgaard raw denim pickled chillwave gastropub green juice Cornhole green juice tote bag Flannel mixtape butcher muggle magic church key retro vhs actually

Humblebrag hashtag kitsch chicharrones williamsburg cleanse cardigan distillery.

Toggle Humblebrag hashtag kitsch chicharrones williamsburg cleanse cardigan distillery.

Shoreditch loko intelligentsia asymmetrical.

Bitters cardigan ugh pug brooklyn forage Vhs pinterest butcher skateboard pitchfork ethical Shoreditch lumbersexual cred Neutra trust fund chartreuse small batch Post ironic art party cold pressed biodiesel leggings health kinfolk Polaroid intelligentsia banjo lumbersexual pickled Viral distillery williamsburg bicycle rights kombucha Pour over synth semiotics polaroid photo booth cleanse Celiac health seitan hashtag typewriter vice heirloom Bicycle rights photo booth tumblr street butcher diy

Cleanse portland letterpress yolo cardigan.

Ethical fanny pack mlkshk brunch blog sustainable literally franzen Kogi semiotics trust fund everyday shoreditch franzen gluten free actually Normcore put a bird on it pinterest locavore gluten free leggings Hella 3 wolf moon cred narwhal Wolf polaroid chicharrones heirloom 8 bit blue bottle tofu helvetica Chartreuse skateboard tattooed farm to table health butcher Tote bag twee williamsburg waistcoat crucifix literally pork belly godard Tacos flannel semiotics helvetica banh mi flexitarian Fixie cardigan portland goth bicycle rights dreamcatcher lomo Tilde put a bird on it lumbersexual chicharrones try hard Synth chillwave yolo forage green juice literally church key viral Jean shorts thundercats bicycle rights church key chia brooklyn artisan hashtag

Locavore narwhal portland fixie twee.

Offal pop up selvage ethical humblebrag mumblecore Chartreuse pork belly scenester readymade diy goth hoodie poutine Etsy before they sold out selfies Kale chips fingerstache locavore yuccie gastropub Shoreditch swag kitsch microdosing messenger bag bicycle rights crucifix Flexitarian fingerstache phlogiston kombucha Butcher banjo next level iphone vegan lomo Meditation cliche etsy actually Cronut bushwick jean shorts bespoke godard ennui polaroid Drinking park squid pitchfork roof mixtape

Xoxo sustainable

<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="true">
  <div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-d0111a">
    <div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-content__icon vi-accordion__icon">
        <!-- Icon coins  -->
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="coins"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M23,17 C23,20.3137085 20.3137085,23 17,23 C14.3253322,23 12.0594235,21.2498945 11.2849448,18.8323545 C11.6174493,18.7693073 11.9422462,18.6891845 12.2600002,18.5928618 C12.9241479,20.5732681 14.7954584,22 17,22 C19.7614237,22 22,19.7614237 22,17 C22,14.7954584 20.5732681,12.9241479 18.5927844,12.2590486 C18.6891437,11.9424298 18.7693222,11.61742 18.8323167,11.2863207 C21.2496612,12.0591214 23,14.3251539 23,17 Z"></path><path fill-rule="nonzero" d="M9.5,1 C14.1944204,1 18,4.80557963 18,9.5 C18,14.1944204 14.1944204,18 9.5,18 C4.80557963,18 1,14.1944204 1,9.5 C1,4.80557963 4.80557963,1 9.5,1 Z M9.5,2 C5.35786438,2 2,5.35786438 2,9.5 C2,13.6421356 5.35786438,17 9.5,17 C13.6421356,17 17,13.6421356 17,9.5 C17,5.35786438 13.6421356,2 9.5,2 Z"></path><path fill-rule="nonzero" d="M11.9645,12.512 C11.5485,12.707 10.9765,12.837 10.1705,12.837 C8.4935,12.837 7.5185,11.94 7.1805,10.51 L10.5085,10.51 C10.5865,10.51 10.6125,10.484 10.6125,10.419 L10.6125,9.951 C10.6125,9.886 10.5865,9.86 10.5215,9.86 L7.0765,9.86 C7.0635,9.665 7.0505,9.457 7.0505,9.249 C7.0505,9.08 7.0505,8.911 7.0635,8.755 L10.7425,8.755 C10.8205,8.755 10.8465,8.729 10.8465,8.664 L10.8465,8.196 C10.8465,8.131 10.8205,8.105 10.7555,8.105 L7.1545,8.105 C7.4665,6.61 8.4415,5.635 10.1835,5.635 C10.8075,5.635 11.3665,5.713 11.6915,5.83 C11.7695,5.856 11.8345,5.804 11.8345,5.726 L11.8345,5.219 C11.8345,5.115 11.8215,5.076 11.7045,5.037 C11.3535,4.933 10.8075,4.855 10.1705,4.855 C8.2075,4.855 6.6865,5.973 6.2965,8.105 L5.1525,8.105 C5.0875,8.105 5.0615,8.131 5.0615,8.196 L5.0615,8.664 C5.0615,8.729 5.0875,8.755 5.1655,8.755 L6.2185,8.755 C6.2055,8.911 6.2055,9.067 6.2055,9.236 C6.2055,9.457 6.2185,9.665 6.2315,9.86 L5.1525,9.86 C5.0875,9.86 5.0615,9.886 5.0615,9.951 L5.0615,10.419 C5.0615,10.484 5.0875,10.51 5.1655,10.51 L6.3225,10.51 C6.6995,12.486 8.0125,13.617 10.1055,13.617 C10.8725,13.617 11.5485,13.5 12.0035,13.318 C12.0945,13.279 12.1205,13.253 12.1205,13.136 L12.1205,12.629 C12.1205,12.525 12.0685,12.46 11.9645,12.512 Z"></path></g></svg>
      </div>
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-b5c484">Park literally yuccie cray marfa typewriter paleo meggings.</h4>
      <a aria-controls="region-9272b2" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-d0111a" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Park literally yuccie cray marfa typewriter paleo meggings.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-b5c484" class="vi-accordion-content__main vi-accordion__main" id="region-9272b2" role="region">
      <div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
        <h3>Sustainable flannel ramps loko irony.</h3>
        <p id="sg-a694ae">Mumblecore portland <a href="#sample">semiotics meh</a> chambray tofu blog forage Pork belly poutine flannel Leggings waistcoat <a href="#sample">park tofu</a> butcher organic Letterpress pbr <a href="#sample">b freegan</a> <a href="#sample">skateboard artisan</a> Offal vinegar flannel pour over banh <a href="#sample">mi mixtape</a> <a href="#sample">loko godard</a> <a href="#sample">Synth loko</a> ethical readymade polaroid truffaut pop up chillwave Thundercats <a href="#sample">green juice</a> selfies pickled fashion axe Artisan blog scenester portland vhs humblebrag squid 3 wolf moon <a href="#sample">Dreamcatcher direct</a> trade chambray helvetica Selvage <a href="#sample">phlogiston chillwave</a> godard cleanse try hard farm to table cold pressed</p>
        <h3>Intelligentsia ethical chicharrones skateboard.</h3>
        <p>Pinterest shabby chic brunch kogi Retro <a href="#sample">truffaut deep</a> v hammock Butcher paleo <a href="#sample">swag Flannel</a> pickled letterpress diy cornhole Cardigan polaroid flexitarian Kinfolk tousled salvia pour over sartorial artisan <a href="#sample">microdosing Cred</a> distillery fanny pack skateboard scenester diy Tattooed locavore cronut hella hoodie helvetica disrupt lumbersexual 3 wolf moon lumbersexual readymade art party meggings cleanse microdosing Biodiesel irony schlitz goth</p>
        <h3>Iphone cronut gentrify brooklyn meh.</h3>
        <p>Pork belly chia small batch pitchfork <a href="#sample">Kickstarter ennui loko</a> irony diy meditation Freegan xoxo yolo fashion axe kitsch locavore cornhole 3 wolf moon hashtag chicharrones paleo readymade <a href="#sample">Pbr b sartorial</a> <a href="#sample">pabst Normcore wolf</a> <a href="#sample">chillwave hashtag Paleo</a> iphone blue bottle kickstarter literally Plaid <a href="#sample">vhs brooklyn truffaut</a> <a href="#sample">kickstarter literally Sriracha</a> <a href="#sample">diy paleo bicycle</a> rights knausgaard Single origin coffee keffiyeh five dollar toast <a href="#sample">bespoke Celiac meh</a> <a href="#sample">normcore Direct trade</a> truffaut seitan cardigan</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-b01949">
    <div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-content__icon vi-accordion__icon">
        <!-- Icon coins  -->
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="coins"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M23,17 C23,20.3137085 20.3137085,23 17,23 C14.3253322,23 12.0594235,21.2498945 11.2849448,18.8323545 C11.6174493,18.7693073 11.9422462,18.6891845 12.2600002,18.5928618 C12.9241479,20.5732681 14.7954584,22 17,22 C19.7614237,22 22,19.7614237 22,17 C22,14.7954584 20.5732681,12.9241479 18.5927844,12.2590486 C18.6891437,11.9424298 18.7693222,11.61742 18.8323167,11.2863207 C21.2496612,12.0591214 23,14.3251539 23,17 Z"></path><path fill-rule="nonzero" d="M9.5,1 C14.1944204,1 18,4.80557963 18,9.5 C18,14.1944204 14.1944204,18 9.5,18 C4.80557963,18 1,14.1944204 1,9.5 C1,4.80557963 4.80557963,1 9.5,1 Z M9.5,2 C5.35786438,2 2,5.35786438 2,9.5 C2,13.6421356 5.35786438,17 9.5,17 C13.6421356,17 17,13.6421356 17,9.5 C17,5.35786438 13.6421356,2 9.5,2 Z"></path><path fill-rule="nonzero" d="M11.9645,12.512 C11.5485,12.707 10.9765,12.837 10.1705,12.837 C8.4935,12.837 7.5185,11.94 7.1805,10.51 L10.5085,10.51 C10.5865,10.51 10.6125,10.484 10.6125,10.419 L10.6125,9.951 C10.6125,9.886 10.5865,9.86 10.5215,9.86 L7.0765,9.86 C7.0635,9.665 7.0505,9.457 7.0505,9.249 C7.0505,9.08 7.0505,8.911 7.0635,8.755 L10.7425,8.755 C10.8205,8.755 10.8465,8.729 10.8465,8.664 L10.8465,8.196 C10.8465,8.131 10.8205,8.105 10.7555,8.105 L7.1545,8.105 C7.4665,6.61 8.4415,5.635 10.1835,5.635 C10.8075,5.635 11.3665,5.713 11.6915,5.83 C11.7695,5.856 11.8345,5.804 11.8345,5.726 L11.8345,5.219 C11.8345,5.115 11.8215,5.076 11.7045,5.037 C11.3535,4.933 10.8075,4.855 10.1705,4.855 C8.2075,4.855 6.6865,5.973 6.2965,8.105 L5.1525,8.105 C5.0875,8.105 5.0615,8.131 5.0615,8.196 L5.0615,8.664 C5.0615,8.729 5.0875,8.755 5.1655,8.755 L6.2185,8.755 C6.2055,8.911 6.2055,9.067 6.2055,9.236 C6.2055,9.457 6.2185,9.665 6.2315,9.86 L5.1525,9.86 C5.0875,9.86 5.0615,9.886 5.0615,9.951 L5.0615,10.419 C5.0615,10.484 5.0875,10.51 5.1655,10.51 L6.3225,10.51 C6.6995,12.486 8.0125,13.617 10.1055,13.617 C10.8725,13.617 11.5485,13.5 12.0035,13.318 C12.0945,13.279 12.1205,13.253 12.1205,13.136 L12.1205,12.629 C12.1205,12.525 12.0685,12.46 11.9645,12.512 Z"></path></g></svg>
      </div>
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-14dd52">Viral brooklyn authentic forage echo vinyl everyday ramps.</h4>
      <a aria-controls="region-cb628a" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-b01949" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Viral brooklyn authentic forage echo vinyl everyday ramps.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-14dd52" class="vi-accordion-content__main vi-accordion__main" id="region-cb628a" role="region">
      <div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
        <h3>Master twee sriracha taxidermy farm-to-table.</h3>
        <p id="sg-8cb30b">Austin marfa aesthetic health cred cornhole organic Goth gluten free drinking gentrify Umami post ironic green juice hella shabby chic single origin coffee Kinfolk iphone small batch blog chillwave deep v tacos pickled Bespoke paleo master blue bottle pork belly aesthetic 8 bit pop up you probably haven <a href="#sample">t heard of</a> them viral Forage helvetica cronut kale chips Franzen normcore bicycle rights Trust fund plaid cronut helvetica retro Whatever brunch jean shorts kickstarter gluten free fingerstache seitan</p>
        <h3>Cliche shoreditch chambray chambray selfies.</h3>
        <p>Kombucha biodiesel keffiyeh cornhole kogi migas mustache before they sold out Bicycle rights lumbersexual master carry Tumblr food <a href="#sample">truck paleo</a> <a href="#sample">bushwick cred</a> offal Lumbersexual <a href="#sample">diy yolo</a> <a href="#sample">knausgaard church</a> key pitchfork before they sold out offal Viral tacos mlkshk <a href="#sample">Pour over</a> intelligentsia keffiyeh truffaut iphone <a href="#sample">tousled Retro</a> disrupt wolf pop up tousled jean <a href="#sample">shorts vhs</a> Kogi typewriter literally bushwick heirloom vhs <a href="#sample">jean shorts</a> Tilde iphone messenger bag <a href="#sample">selfies 8</a> <a href="#sample">bit try</a> <a href="#sample">hard Sartorial</a> iphone cardigan wayfarers cronut chambray Tousled five dollar <a href="#sample">toast you</a> probably haven <a href="#sample">t heard</a> of them thundercats lumbersexual yuccie Kogi <a href="#sample">distillery ethical</a> whatever pinterest next level</p>
        <h3>Kinfolk slow-carb wolf cred.</h3>
        <p>Ramps pork belly <a href="#sample">meggings tousled mixtape</a> <a href="#sample">selvage Salvia pickled</a> austin meditation put a bird on it Blue bottle narwhal poutine farm to table lo fi sriracha hella Kale chips iphone bitters lumbersexual Literally godard tattooed mumblecore shabby chic before they sold out portland Tousled letterpress you probably haven t heard of them Iphone blog <a href="#sample">fixie skateboard small</a> batch photo booth Banh mi hashtag knausgaard raw denim <a href="#sample">pickled chillwave gastropub</a> green juice Cornhole green juice tote bag Flannel mixtape butcher muggle magic church key retro vhs actually</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-3d27b1">
    <div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-content__icon vi-accordion__icon">
        <!-- Icon coins  -->
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="coins"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M23,17 C23,20.3137085 20.3137085,23 17,23 C14.3253322,23 12.0594235,21.2498945 11.2849448,18.8323545 C11.6174493,18.7693073 11.9422462,18.6891845 12.2600002,18.5928618 C12.9241479,20.5732681 14.7954584,22 17,22 C19.7614237,22 22,19.7614237 22,17 C22,14.7954584 20.5732681,12.9241479 18.5927844,12.2590486 C18.6891437,11.9424298 18.7693222,11.61742 18.8323167,11.2863207 C21.2496612,12.0591214 23,14.3251539 23,17 Z"></path><path fill-rule="nonzero" d="M9.5,1 C14.1944204,1 18,4.80557963 18,9.5 C18,14.1944204 14.1944204,18 9.5,18 C4.80557963,18 1,14.1944204 1,9.5 C1,4.80557963 4.80557963,1 9.5,1 Z M9.5,2 C5.35786438,2 2,5.35786438 2,9.5 C2,13.6421356 5.35786438,17 9.5,17 C13.6421356,17 17,13.6421356 17,9.5 C17,5.35786438 13.6421356,2 9.5,2 Z"></path><path fill-rule="nonzero" d="M11.9645,12.512 C11.5485,12.707 10.9765,12.837 10.1705,12.837 C8.4935,12.837 7.5185,11.94 7.1805,10.51 L10.5085,10.51 C10.5865,10.51 10.6125,10.484 10.6125,10.419 L10.6125,9.951 C10.6125,9.886 10.5865,9.86 10.5215,9.86 L7.0765,9.86 C7.0635,9.665 7.0505,9.457 7.0505,9.249 C7.0505,9.08 7.0505,8.911 7.0635,8.755 L10.7425,8.755 C10.8205,8.755 10.8465,8.729 10.8465,8.664 L10.8465,8.196 C10.8465,8.131 10.8205,8.105 10.7555,8.105 L7.1545,8.105 C7.4665,6.61 8.4415,5.635 10.1835,5.635 C10.8075,5.635 11.3665,5.713 11.6915,5.83 C11.7695,5.856 11.8345,5.804 11.8345,5.726 L11.8345,5.219 C11.8345,5.115 11.8215,5.076 11.7045,5.037 C11.3535,4.933 10.8075,4.855 10.1705,4.855 C8.2075,4.855 6.6865,5.973 6.2965,8.105 L5.1525,8.105 C5.0875,8.105 5.0615,8.131 5.0615,8.196 L5.0615,8.664 C5.0615,8.729 5.0875,8.755 5.1655,8.755 L6.2185,8.755 C6.2055,8.911 6.2055,9.067 6.2055,9.236 C6.2055,9.457 6.2185,9.665 6.2315,9.86 L5.1525,9.86 C5.0875,9.86 5.0615,9.886 5.0615,9.951 L5.0615,10.419 C5.0615,10.484 5.0875,10.51 5.1655,10.51 L6.3225,10.51 C6.6995,12.486 8.0125,13.617 10.1055,13.617 C10.8725,13.617 11.5485,13.5 12.0035,13.318 C12.0945,13.279 12.1205,13.253 12.1205,13.136 L12.1205,12.629 C12.1205,12.525 12.0685,12.46 11.9645,12.512 Z"></path></g></svg>
      </div>
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-17a996">Humblebrag hashtag kitsch chicharrones williamsburg cleanse cardigan distillery.</h4>
      <a aria-controls="region-85c449" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-3d27b1" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Humblebrag hashtag kitsch chicharrones williamsburg cleanse cardigan distillery.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-17a996" class="vi-accordion-content__main vi-accordion__main" id="region-85c449" role="region">
      <div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
        <h3>Shoreditch loko intelligentsia asymmetrical.</h3>
        <p>Bitters cardigan ugh pug brooklyn forage Vhs pinterest butcher skateboard pitchfork ethical <a href="#sample">Shoreditch lumbersexual</a> cred Neutra trust fund chartreuse small batch Post ironic art party cold pressed biodiesel leggings health kinfolk Polaroid intelligentsia banjo lumbersexual pickled Viral distillery williamsburg bicycle rights kombucha Pour over synth semiotics polaroid photo booth cleanse Celiac health seitan hashtag typewriter vice heirloom Bicycle rights photo booth tumblr street butcher diy</p>
        <h3>Cleanse portland letterpress yolo cardigan.</h3>
        <p>Ethical fanny pack mlkshk brunch blog sustainable literally franzen Kogi semiotics trust fund everyday shoreditch franzen gluten free actually Normcore put a bird on it pinterest locavore gluten free leggings Hella 3 wolf moon cred narwhal Wolf polaroid chicharrones heirloom 8 bit blue bottle tofu <a href="#sample">helvetica Chartreuse skateboard</a> tattooed farm to table health butcher Tote bag twee williamsburg waistcoat crucifix literally pork belly godard Tacos flannel semiotics helvetica banh mi flexitarian Fixie cardigan portland goth bicycle rights dreamcatcher lomo Tilde put a bird on it lumbersexual chicharrones try hard Synth chillwave yolo forage green juice literally church key viral Jean shorts thundercats bicycle rights church key chia brooklyn artisan hashtag</p>
        <h3>Locavore narwhal portland fixie twee.</h3>
        <p>Offal pop up selvage ethical humblebrag mumblecore Chartreuse pork belly scenester readymade diy goth hoodie poutine Etsy before they sold out selfies Kale chips fingerstache locavore yuccie gastropub Shoreditch swag kitsch microdosing messenger bag bicycle rights crucifix Flexitarian fingerstache phlogiston kombucha Butcher banjo next level iphone vegan lomo Meditation cliche etsy actually Cronut bushwick jean shorts bespoke godard ennui polaroid Drinking park squid pitchfork roof mixtape</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Xoxo sustainable</a>
      </div>
    </div>
  </div>
</div>

The Content Accordion can also be used with an image on the left

Link content in second panel

Pug wolf vinyl beard distillery tumblr kombucha hoodie.

Toggle Pug wolf vinyl beard distillery tumblr kombucha hoodie.

Wolf lumbersexual flexitarian carry.

Chicharrones leggings helvetica tumblr food truck Flexitarian vegan pinterest ugh skateboard Farm to table selfies readymade Meggings banjo freegan tote bag kogi leggings authentic health Polaroid 3 wolf moon fingerstache ennui pug Pitchfork lo fi authentic try hard 3 wolf moon portland semiotics 3 wolf moon selfies bitters kinfolk Helvetica distillery food truck Gentrify meditation ethical trust fund listicle Kombucha cred brooklyn waistcoat blog church key everyday dreamcatcher Paleo kitsch synth actually everyday pork belly before they sold out Crucifix loko blue bottle occupy trust fund tilde carry

Microdosing pop-up cold-pressed beard.

Kickstarter kale chips synth Cornhole fanny pack chia pour over beard twee kogi intelligentsia Synth carry semiotics narwhal yr pug craft beer Shabby chic readymade chambray tofu jean shorts Ethical fingerstache fanny pack church key keffiyeh pork belly butcher loko Scenester 1 five dollar toast portland mlkshk authentic franzen Hammock intelligentsia crucifix echo Microdosing austin lumbersexual truffaut chillwave offal Quinoa street chicharrones umami shabby chic Hella lomo normcore loko green juice Yr readymade bitters distillery Marfa vinegar raw denim tacos butcher

Twee drinking slow-carb skateboard brunch.

Artisan kinfolk neutra swag meh humblebrag banh mi Blog venmo hammock Truffaut bitters xoxo Lo fi kinfolk etsy stumptown Gentrify tacos before they sold out stumptown literally pabst tofu Fanny pack literally mixtape hella beard Forage wayfarers ramps irony Chia flexitarian chillwave synth Pork belly hoodie echo raw denim wes anderson freegan Keytar gastropub irony austin distillery farm to table Swag actually typewriter freegan everyday poutine heirloom hella

Diy cleanse meggings readymade sustainable carry banjo mustache.

Toggle Diy cleanse meggings readymade sustainable carry banjo mustache.

Seitan letterpress poutine wolf polaroid.

90 s blue bottle health williamsburg Literally wolf locavore normcore Church key bitters fanny pack health Phlogiston raw denim mustache truffaut chartreuse Fixie yuccie cleanse brooklyn Slow carb tacos taxidermy Cred jean shorts fixie brooklyn pop up Sartorial before they sold out seitan diy bespoke Locavore pinterest ugh seitan church key slow carb jean shorts Health knausgaard banjo sustainable raw denim bespoke Master green juice hashtag

Umami goth tilde ugh chicharrones.

Pug post ironic cred chicharrones taxidermy farm to table Helvetica chia listicle ugh kogi meh lo fi Photo booth single origin coffee goth thundercats tattooed next level Fashion axe beard hella austin brunch thundercats lumbersexual 90 s quinoa sartorial cronut Waistcoat organic authentic letterpress muggle magic Brooklyn meggings umami Blue bottle muggle magic umami slow carb tofu skateboard Trust fund cold pressed tumblr mlkshk Celiac locavore phlogiston fashion axe Wayfarers synth knausgaard Master ethical raw denim twee intelligentsia vinyl chia vinegar

Post-ironic shoreditch dreamcatcher try-hard portland post-ironic hella cray.

Toggle Post-ironic shoreditch dreamcatcher try-hard portland post-ironic hella cray.

Mustache synth etsy ugh try-hard.

Kombucha tote bag post ironic humblebrag pickled Slow carb vhs marfa direct trade pour over polaroid Plaid phlogiston pickled Disrupt tote bag tattooed tumblr synth distillery migas kale chips Park occupy slow carb Lo fi trust fund echo yr scenester Yolo food truck ennui sustainable Vice sustainable yr chia pinterest swag Synth put a bird on it xoxo mustache Tattooed lomo pinterest chambray cleanse Heirloom drinking austin tofu squid gluten free

Church-key lo-fi locavore actually crucifix.

Mustache plaid craft beer wayfarers leggings banjo fanny pack mlkshk Franzen echo chambray photo booth letterpress poutine cold pressed Chia tattooed messenger bag Celiac shabby chic cold pressed godard mustache selvage slow carb Small batch authentic banh mi keytar 3 wolf moon keffiyeh hella meditation Keytar thundercats occupy kinfolk Helvetica mixtape 3 wolf moon literally hoodie keffiyeh forage next level Keytar roof lumbersexual photo booth austin offal skateboard Chicharrones shabby chic tattooed selfies Lo fi vice bushwick park

Mlkshk synth

<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="true">
  <div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-028cce">
    <div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-content__icon vi-accordion__icon">
        <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
      </div>
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-549353">Pug wolf vinyl beard distillery tumblr kombucha hoodie.</h4>
      <a aria-controls="region-80b632" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-028cce" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Pug wolf vinyl beard distillery tumblr kombucha hoodie.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-549353" class="vi-accordion-content__main vi-accordion__main" id="region-80b632" role="region">
      <div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
        <h3>Wolf lumbersexual flexitarian carry.</h3>
        <p id="sg-9bd80c">Chicharrones leggings helvetica tumblr food truck Flexitarian vegan pinterest ugh skateboard Farm to table selfies readymade Meggings banjo freegan tote bag kogi leggings authentic health Polaroid 3 wolf moon fingerstache ennui pug Pitchfork lo fi authentic try hard 3 wolf moon portland semiotics 3 wolf moon selfies bitters kinfolk Helvetica distillery food truck Gentrify meditation ethical trust fund listicle Kombucha cred brooklyn waistcoat blog church key everyday dreamcatcher Paleo kitsch synth actually everyday pork belly before they sold out Crucifix loko blue bottle occupy trust fund tilde carry</p>
        <h3>Microdosing pop-up cold-pressed beard.</h3>
        <p>Kickstarter kale chips synth Cornhole fanny pack chia pour over beard twee kogi intelligentsia Synth carry semiotics narwhal yr pug craft beer Shabby chic readymade chambray tofu jean shorts Ethical fingerstache fanny pack church key keffiyeh pork belly butcher loko Scenester 1 five dollar toast portland mlkshk authentic franzen Hammock intelligentsia crucifix echo Microdosing austin lumbersexual truffaut chillwave offal Quinoa street chicharrones umami <a href="#sample">shabby chic Hella</a> lomo normcore loko green juice Yr readymade bitters distillery Marfa vinegar raw denim tacos butcher</p>
        <h3>Twee drinking slow-carb skateboard brunch.</h3>
        <p>Artisan kinfolk neutra <a href="#sample">swag meh humblebrag</a> banh mi Blog <a href="#sample">venmo hammock Truffaut</a> <a href="#sample">bitters xoxo Lo</a> fi kinfolk etsy stumptown Gentrify tacos <a href="#sample">before they sold</a> <a href="#sample">out stumptown literally</a> <a href="#sample">pabst tofu Fanny</a> pack literally mixtape hella beard Forage <a href="#sample">wayfarers ramps irony</a> <a href="#sample">Chia flexitarian chillwave</a> synth Pork belly <a href="#sample">hoodie echo raw</a> <a href="#sample">denim wes anderson</a> <a href="#sample">freegan Keytar gastropub</a> irony austin distillery <a href="#sample">farm to table</a> <a href="#sample">Swag actually typewriter</a> <a href="#sample">freegan everyday poutine</a> heirloom hella</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-9dd1a4">
    <div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-content__icon vi-accordion__icon">
        <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
      </div>
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-266614">Diy cleanse meggings readymade sustainable carry banjo mustache.</h4>
      <a aria-controls="region-ba6e10" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-9dd1a4" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Diy cleanse meggings readymade sustainable carry banjo mustache.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-266614" class="vi-accordion-content__main vi-accordion__main" id="region-ba6e10" role="region">
      <div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
        <h3>Seitan letterpress poutine wolf polaroid.</h3>
        <p id="sg-8386e5">90 s blue bottle health williamsburg Literally wolf locavore normcore Church key <a href="#sample">bitters fanny pack</a> health Phlogiston raw denim mustache truffaut chartreuse Fixie yuccie <a href="#sample">cleanse brooklyn Slow</a> carb tacos taxidermy Cred jean shorts fixie brooklyn pop up Sartorial before they sold out seitan diy bespoke Locavore pinterest ugh seitan church key slow carb jean shorts Health knausgaard banjo sustainable raw denim bespoke Master green juice hashtag</p>
        <h3>Umami goth tilde ugh chicharrones.</h3>
        <p>Pug post ironic cred chicharrones taxidermy farm to table <a href="#sample">Helvetica chia listicle</a> ugh kogi meh lo fi Photo booth single origin coffee goth thundercats tattooed next level Fashion axe beard hella austin brunch thundercats lumbersexual 90 s quinoa sartorial cronut Waistcoat organic authentic letterpress muggle magic Brooklyn meggings umami Blue bottle muggle magic umami slow carb tofu <a href="#sample">skateboard Trust fund</a> cold pressed tumblr <a href="#sample">mlkshk Celiac locavore</a> phlogiston fashion axe Wayfarers synth knausgaard Master ethical raw denim twee intelligentsia vinyl chia vinegar</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-67890c">
    <div class="vi-accordion-content__header vi-accordion-content__header--icon vi-accordion__header vi-accordion__header--icon">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-content__icon vi-accordion__icon">
        <div class="vi-circular-image"><img alt="alt text" draggable="false" loading="lazy" src="/assets/images/static/test-600x600.jpg"></div>
      </div>
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-b03ae2">Post-ironic shoreditch dreamcatcher try-hard portland post-ironic hella cray.</h4>
      <a aria-controls="region-25d63c" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-67890c" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Post-ironic shoreditch dreamcatcher try-hard portland post-ironic hella cray.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-b03ae2" class="vi-accordion-content__main vi-accordion__main" id="region-25d63c" role="region">
      <div class="vi-accordion-content__content vi-accordion-content__content--icon vi-typesystem vi-typesystem--collapse-last vi-accordion__content vi-accordion__content--icon">
        <h3>Mustache synth etsy ugh try-hard.</h3>
        <p><a href="#sample">Kombucha tote bag</a> <a href="#sample">post ironic humblebrag</a> <a href="#sample">pickled Slow carb</a> <a href="#sample">vhs marfa direct</a> <a href="#sample">trade pour over</a> <a href="#sample">polaroid Plaid phlogiston</a> <a href="#sample">pickled Disrupt tote</a> <a href="#sample">bag tattooed tumblr</a> <a href="#sample">synth distillery migas</a> <a href="#sample">kale chips Park</a> <a href="#sample">occupy slow carb</a> <a href="#sample">Lo fi trust</a> <a href="#sample">fund echo yr</a> <a href="#sample">scenester Yolo food</a> <a href="#sample">truck ennui sustainable</a> <a href="#sample">Vice sustainable yr</a> <a href="#sample">chia pinterest swag</a> <a href="#sample">Synth put a</a> <a href="#sample">bird on it</a> <a href="#sample">xoxo mustache Tattooed</a> <a href="#sample">lomo pinterest chambray</a> <a href="#sample">cleanse Heirloom drinking</a> <a href="#sample">austin tofu squid</a> <a href="#sample">gluten free</a></p>
        <h3>Church-key lo-fi locavore actually crucifix.</h3>
        <p>Mustache plaid craft beer wayfarers leggings banjo fanny pack mlkshk Franzen echo chambray photo booth letterpress poutine cold pressed Chia tattooed messenger bag Celiac shabby chic cold pressed godard mustache selvage slow carb Small batch authentic banh mi <a href="#sample">keytar 3</a> wolf moon keffiyeh hella meditation Keytar thundercats occupy kinfolk Helvetica mixtape 3 wolf moon literally hoodie keffiyeh forage next level <a href="#sample">Keytar roof</a> lumbersexual photo booth austin offal skateboard Chicharrones shabby chic tattooed selfies Lo fi vice bushwick park</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Mlkshk synth</a>
      </div>
    </div>
  </div>
</div>

Refine #

The Refine Accordion shows a small header and a downward/upwards chevron trigger. Associated content is displayed against an offwhite background.

Plaid ugh celiac vhs bitters freegan distillery actually +1 intelligentsia flexitarian lo-fi echo twee flannel.

Swag chartreuse pabst polaroid pitchfork keytar pinterest irony tumblr paleo lumbersexual drinking phlogiston locavore franzen.

Goth echo everyday green juice 1 narwhal bushwick Franzen 3 wolf moon sartorial selfies squid narwhal cornhole Jean shorts 90 s yuccie sustainable gastropub Pinterest ennui hella bespoke celiac mumblecore Squid everyday blog 8 bit biodiesel Knausgaard pbr b deep v irony mixtape cardigan Drinking health xoxo meh Normcore lumbersexual literally photo booth lomo hammock Messenger bag sriracha beard typewriter cred ennui intelligentsia Green juice celiac etsy flannel wayfarers sartorial Listicle goth twee crucifix pbr b yr green juice tacos Authentic park 90 s normcore flexitarian hammock literally

Gastropub truffaut

<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion" data-autoclose="false">
  <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-b3ab5a">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-d443e3">Irony cred church-key beard pabst cleanse post-ironic aesthetic.</h4>
      <a aria-controls="region-85a7e4" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-b3ab5a" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Irony cred church-key beard pabst cleanse post-ironic aesthetic.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-d443e3" class="vi-accordion-refine__main vi-accordion__main" id="region-85a7e4" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Plaid ugh celiac vhs bitters freegan distillery actually +1 intelligentsia flexitarian lo-fi echo twee flannel.</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-c32b22">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-12db34">Typewriter bespoke vinyl beard cliche taxidermy ennui actually.</h4>
      <a aria-controls="region-4c6a32" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-c32b22" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Typewriter bespoke vinyl beard cliche taxidermy ennui actually.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-12db34" class="vi-accordion-refine__main vi-accordion__main" id="region-4c6a32" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Swag chartreuse pabst polaroid pitchfork keytar pinterest irony tumblr paleo lumbersexual drinking phlogiston locavore franzen.</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-3c7597">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-5ca837">Roof listicle authentic lomo kitsch 90's keffiyeh leggings.</h4>
      <a aria-controls="region-865d67" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-3c7597" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Roof listicle authentic lomo kitsch 90's keffiyeh leggings.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-5ca837" class="vi-accordion-refine__main vi-accordion__main" id="region-865d67" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Goth echo everyday green juice 1 narwhal bushwick <a href="#sample">Franzen 3</a> wolf moon sartorial selfies squid narwhal cornhole Jean shorts 90 <a href="#sample">s yuccie</a> sustainable gastropub Pinterest ennui hella bespoke celiac mumblecore <a href="#sample">Squid everyday</a> <a href="#sample">blog 8</a> bit biodiesel Knausgaard pbr b deep v irony <a href="#sample">mixtape cardigan</a> Drinking health xoxo meh <a href="#sample">Normcore lumbersexual</a> <a href="#sample">literally photo</a> <a href="#sample">booth lomo</a> hammock Messenger bag sriracha <a href="#sample">beard typewriter</a> cred ennui intelligentsia Green juice celiac etsy flannel wayfarers sartorial Listicle goth twee crucifix pbr b yr green juice tacos Authentic park 90 s <a href="#sample">normcore flexitarian</a> hammock literally</p>
        <!-- Button type: outline  -->
        <a href="#" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn">Gastropub truffaut</a>
      </div>
    </div>
  </div>
</div>

Pipeline #

Similar to the Content Accordion, the pipeline accordion shows a larger header and a clear +/- trigger. Furthermore, the accordion items each have spacing in between. Added with the pipeline (but not exclusively usable with the pipeline) are tags and a subtitle Associated content is displayed against an white background.

Cronut ennui loko disrupt.

Ramps deep v five dollar toast tacos Blue bottle fashion axe trust fund thundercats normcore Viral mlkshk sustainable Marfa shabby chic 1 park Knausgaard street flannel cliche yr Seitan authentic leggings disrupt Pop up occupy drinking banh mi dreamcatcher hashtag Plaid freegan tofu cliche mumblecore gastropub mixtape Yolo single origin coffee slow carb Lumbersexual lo fi tattooed direct trade food truck chambray

Occupy tacos hashtag skateboard gastropub.

Health vice craft beer pinterest Mlkshk mustache authentic brunch Brooklyn celiac literally meditation leggings salvia polaroid heirloom Try hard fashion axe phlogiston cardigan Lumbersexual gluten free yuccie blue bottle bitters Carry phlogiston schlitz Schlitz quinoa drinking trust fund seitan Actually kickstarter muggle magic pbr b blog single origin coffee williamsburg Cardigan hashtag asymmetrical iphone literally etsy Ethical vice 1 forage paleo microdosing scenester Thundercats squid fashion axe meditation vinegar vegan street roof

Kombucha lumbersexual pop-up sustainable.

Locavore sriracha street fanny pack truffaut godard disrupt Selfies tofu bespoke chambray Biodiesel hashtag 90 s bushwick banh mi Slow carb cray authentic tousled celiac park single origin coffee 3 wolf moon banh mi listicle readymade echo Chartreuse pickled locavore Brooklyn ramps knausgaard keffiyeh skateboard diy retro street Wolf pop up etsy Actually locavore kinfolk Squid celiac williamsburg forage jean shorts locavore

Sartorial wayfarers typewriter letterpress vhs.

Actually tattooed fashion axe Austin normcore waistcoat hella xoxo gluten free chia typewriter Craft beer brunch cornhole tilde wolf pork belly freegan Lumbersexual kale chips health shoreditch viral Banjo jean shorts green juice pug meh sriracha stumptown crucifix Kale chips helvetica schlitz banjo food truck butcher freegan mixtape Offal shoreditch pitchfork butcher typewriter vinegar polaroid Street yolo poutine Blog gentrify paleo Intelligentsia diy roof typewriter

Forage cronut dreamcatcher farm-to-table.

Raw denim try hard etsy Gluten free selvage food truck stumptown humblebrag Church key yr cred freegan salvia before they sold out heirloom tilde Typewriter microdosing scenester fingerstache Typewriter paleo knausgaard semiotics everyday scenester Pinterest umami church key quinoa Wayfarers tumblr cray fingerstache aesthetic shabby chic Gastropub twee blog Shabby chic freegan umami cray Waistcoat forage artisan 8 bit roof ugh thundercats lumbersexual Austin yr muggle magic drinking vinegar yolo kombucha helvetica

Franzen taxidermy helvetica carry.

Viral tofu flannel Meh wolf freegan wes anderson bushwick mixtape Kitsch cray seitan selfies beard fanny pack kinfolk mumblecore Brunch letterpress pork belly pabst Fashion axe pitchfork mumblecore next level chicharrones synth goth Seitan portland aesthetic flannel vegan Wes anderson meggings schlitz hashtag chicharrones Butcher hoodie wes anderson bushwick Pop up yolo artisan microdosing cornhole Fixie food truck kombucha thundercats Cold pressed narwhal cliche muggle magic cred bitters seitan fingerstache

Beard lumbersexual

Microdosing aesthetic selvage mlkshk shoreditch.

Jean shorts mustache fingerstache Chia gluten free portland yr post ironic xoxo whatever loko Lomo austin direct trade fixie farm to table freegan Flexitarian salvia ugh yr kogi loko seitan raw denim Franzen bushwick meditation carry five dollar toast synth gastropub lo fi Austin slow carb salvia You probably haven t heard of them mustache vinegar brunch cronut church key post ironic seitan Neutra photo booth plaid Single origin coffee shabby chic paleo scenester godard Church key swag kinfolk art party wolf

Master normcore

<!-- Accordion type: pipeline -->
<div class="vi-accordion-pipeline vi-accordion" data-autoclose="true">
  <div class="is-active vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-bce355">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-3b382a">Street sartorial park brooklyn try-hard tattooed kitsch pickled.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Asymmetrical actually health.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          knausgaard
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          helvetica
        </li>
      </ul>
      <a aria-controls="region-be4d53" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-bce355" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-3b382a" class="vi-accordion-pipeline__main vi-accordion__main" id="region-be4d53" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Cronut ennui loko disrupt.</h3>
        <p id="sg-c500bb"><a href="#sample">Ramps deep</a> v five dollar toast tacos Blue bottle fashion axe trust <a href="#sample">fund thundercats</a> normcore Viral mlkshk sustainable <a href="#sample">Marfa shabby</a> chic 1 park Knausgaard street flannel cliche yr Seitan authentic leggings disrupt Pop up <a href="#sample">occupy drinking</a> banh mi dreamcatcher hashtag Plaid freegan tofu cliche mumblecore gastropub mixtape Yolo single origin coffee slow carb Lumbersexual lo fi tattooed direct <a href="#sample">trade food</a> truck chambray</p>
        <h3>Occupy tacos hashtag skateboard gastropub.</h3>
        <p>Health vice craft <a href="#sample">beer pinterest Mlkshk</a> <a href="#sample">mustache authentic brunch</a> Brooklyn celiac literally meditation leggings salvia polaroid heirloom Try hard fashion axe phlogiston cardigan Lumbersexual gluten free yuccie blue bottle bitters Carry phlogiston schlitz Schlitz quinoa drinking <a href="#sample">trust fund seitan</a> Actually kickstarter muggle magic pbr b blog single origin coffee williamsburg Cardigan hashtag asymmetrical iphone literally etsy Ethical <a href="#sample">vice 1 forage</a> <a href="#sample">paleo microdosing scenester</a> Thundercats squid fashion axe meditation vinegar vegan street roof</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-e3b83c">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-ac716b">Meh carry tumblr mixtape retro squid vinegar ennui.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Poutine pbr&amp;b ramps.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          franzen
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          squid
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          listicle
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          kombucha
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          iPhone
        </li>
      </ul>
      <a aria-controls="region-b60eb2" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-e3b83c" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-ac716b" class="vi-accordion-pipeline__main vi-accordion__main" id="region-b60eb2" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Kombucha lumbersexual pop-up sustainable.</h3>
        <p id="sg-528bbe">Locavore sriracha street fanny pack truffaut <a href="#sample">godard disrupt</a> Selfies tofu bespoke chambray Biodiesel hashtag 90 s bushwick banh mi Slow carb cray authentic tousled celiac park single origin coffee 3 wolf moon banh mi listicle readymade echo Chartreuse pickled locavore Brooklyn ramps knausgaard keffiyeh skateboard diy <a href="#sample">retro street</a> Wolf pop up etsy Actually locavore kinfolk Squid celiac williamsburg forage jean shorts locavore</p>
        <h3>Sartorial wayfarers typewriter letterpress vhs.</h3>
        <p>Actually tattooed fashion axe Austin normcore waistcoat hella xoxo gluten free chia typewriter Craft beer <a href="#sample">brunch cornhole tilde</a> <a href="#sample">wolf pork belly</a> freegan Lumbersexual kale <a href="#sample">chips health shoreditch</a> <a href="#sample">viral Banjo jean</a> shorts green juice <a href="#sample">pug meh sriracha</a> stumptown crucifix Kale chips helvetica schlitz <a href="#sample">banjo food truck</a> butcher freegan mixtape <a href="#sample">Offal shoreditch pitchfork</a> butcher typewriter vinegar polaroid Street yolo poutine Blog gentrify paleo Intelligentsia diy <a href="#sample">roof typewriter</a></p>
        <h3>Forage cronut dreamcatcher farm-to-table.</h3>
        <p>Raw denim try hard etsy Gluten free selvage food truck stumptown humblebrag <a href="#sample">Church key yr</a> cred freegan salvia before they sold out heirloom tilde Typewriter microdosing scenester fingerstache Typewriter paleo knausgaard semiotics everyday scenester Pinterest umami <a href="#sample">church key quinoa</a> Wayfarers tumblr cray fingerstache aesthetic shabby chic Gastropub twee blog Shabby chic freegan umami cray Waistcoat forage artisan 8 bit roof <a href="#sample">ugh thundercats lumbersexual</a> Austin yr muggle magic drinking vinegar yolo kombucha helvetica</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-0d3122">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-7a97c6">Hoodie umami selvage everyday literally distillery tumblr heirloom.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Street ugh selfies.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          organic
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          chia
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          ennui
        </li>
      </ul>
      <a aria-controls="region-12cd69" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-0d3122" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-7a97c6" class="vi-accordion-pipeline__main vi-accordion__main" id="region-12cd69" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Franzen taxidermy helvetica carry.</h3>
        <p>Viral tofu flannel Meh wolf freegan wes anderson bushwick mixtape Kitsch cray seitan selfies beard fanny <a href="#sample">pack kinfolk</a> mumblecore Brunch letterpress pork belly pabst Fashion axe pitchfork mumblecore next level chicharrones synth goth Seitan portland aesthetic flannel vegan Wes anderson meggings schlitz hashtag chicharrones Butcher hoodie wes anderson bushwick Pop up yolo artisan microdosing cornhole Fixie food truck kombucha thundercats Cold pressed narwhal cliche muggle magic cred bitters seitan fingerstache</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Beard lumbersexual</a>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-624b86">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-723147">knausgaard
          Godard
        </h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Roof pitchfork marfa.)
        </span>
        <p>Currently, there is no detailed content available for this drug.</p>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          sriracha
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          pop-up
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          meditation
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          ethical
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          Godard
        </li>
      </ul>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-979c98">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-ba34b8">Butcher keffiyeh kitsch cliche sustainable tattooed church-key kickstarter.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Kickstarter dreamcatcher loko.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          yr
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          hammock
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          viral
        </li>
      </ul>
      <a aria-controls="region-a3c28c" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-979c98" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-ba34b8" class="vi-accordion-pipeline__main vi-accordion__main" id="region-a3c28c" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Microdosing aesthetic selvage mlkshk shoreditch.</h3>
        <p>Jean shorts mustache fingerstache Chia gluten free portland yr post ironic xoxo whatever loko Lomo austin direct trade <a href="#sample">fixie farm</a> to table freegan Flexitarian salvia ugh yr kogi loko seitan raw denim Franzen bushwick meditation carry five dollar toast synth gastropub lo fi Austin slow carb salvia You probably haven t heard of them mustache vinegar brunch cronut church key post ironic seitan Neutra photo booth plaid Single origin coffee shabby chic paleo scenester godard Church key swag kinfolk art party wolf</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Master normcore</a>
      </div>
    </div>
  </div>
</div>

The color of the whole component can be easily changed by changing a css variable

Cleanse gluten-free kogi kombucha bespoke.

Gluten free occupy chicharrones ugh put a bird on it organic blog Bicycle rights tilde pabst artisan brooklyn Retro gentrify post ironic Scenester 90 s viral tacos meggings letterpress normcore photo booth Normcore lomo pitchfork Wolf actually dreamcatcher normcore hoodie heirloom Echo chartreuse photo booth gastropub health lomo Freegan cold pressed fashion axe cred Park ugh trust fund Ennui tousled vice quinoa paleo Cliche put a bird on it 8 bit echo carry poutine pug hammock Cliche health crucifix cred selvage

Normcore bespoke cold-pressed viral gastropub.

Keytar fixie fingerstache waistcoat gluten free before they sold out Microdosing polaroid plaid artisan next level Cliche irony chia narwhal Selfies 3 wolf moon shoreditch listicle Fixie food truck meditation godard bushwick helvetica Sustainable vice artisan Trust fund drinking twee Photo booth post ironic readymade keytar carry tilde schlitz Cronut keffiyeh iphone keytar Tattooed sriracha authentic wolf kickstarter iphone organic Microdosing etsy pbr b xoxo pour over try hard drinking tilde Fanny pack mumblecore yr lomo cred blue bottle drinking

Poutine meditation selvage mlkshk vegan.

Ramps direct trade tofu thundercats Portland tote bag tacos Park small batch yolo tote bag trust fund slow carb fashion axe Narwhal chia loko sustainable retro photo booth Jean shorts franzen cliche lumbersexual you probably haven t heard of them Sriracha paleo craft beer Microdosing polaroid yr Authentic ennui slow carb banjo Mlkshk trust fund diy tacos cleanse etsy Vinyl hella humblebrag

Squid brooklyn scenester schlitz drinking.

Helvetica green juice iphone tote bag tilde chambray Keffiyeh whatever 90 s cronut truffaut vegan lomo master Taxidermy literally scenester street fixie Organic everyday migas art party lumbersexual cray dreamcatcher gentrify Pinterest kogi brooklyn paleo austin semiotics iphone Wes anderson 90 s literally xoxo normcore vice Scenester typewriter crucifix hella slow carb Squid iphone mixtape green juice poutine hammock wes anderson Narwhal meditation pbr b bespoke waistcoat Disrupt pabst bespoke Drinking mlkshk quinoa celiac kinfolk tumblr disrupt Post ironic semiotics retro phlogiston sartorial cornhole

Bespoke schlitz gluten-free shoreditch.

Skateboard green juice mumblecore park portland Stumptown fixie squid Craft beer vinegar beard ramps vegan Meditation yr fanny pack loko chicharrones Heirloom messenger bag 8 bit photo booth bicycle rights Franzen microdosing flannel polaroid craft beer Pop up migas pabst microdosing fanny pack Viral gluten free plaid art party roof Yr cred schlitz yolo Tilde keffiyeh goth umami actually craft beer kickstarter wolf Pickled offal whatever

Gentrify 8-bit

Chillwave portland marfa mlkshk mustache.

Intelligentsia keffiyeh literally fashion axe plaid 3 wolf moon humblebrag Marfa trust fund pbr b brunch schlitz literally Vice meh knausgaard health seitan synth authentic Photo booth small batch umami yr paleo williamsburg hammock Goth butcher schlitz brooklyn letterpress retro irony Pinterest park diy skateboard bitters Mumblecore stumptown forage Put a bird on it ramps keytar jean shorts chillwave Bushwick brunch hella trust fund mumblecore farm to table Muggle magic thundercats synth fashion axe Ugh pickled you probably haven t heard of them narwhal hammock asymmetrical craft beer Twee meditation cornhole 90 s franzen

Slow-carb sriracha lumbersexual roof flannel.

Blue bottle ethical ennui drinking bushwick Squid hashtag leggings portland Keffiyeh actually raw denim tattooed stumptown pug readymade green juice Neutra franzen gastropub vinegar echo meggings mumblecore craft beer Tumblr letterpress messenger bag cleanse kogi photo booth fingerstache Church key cliche cardigan meh bespoke Food truck iphone flexitarian vinegar kale chips meggings stumptown bespoke Twee meh humblebrag Cornhole green juice skateboard stumptown bitters keytar trust fund brunch Poutine brunch chillwave viral crucifix Whatever plaid irony taxidermy ugh messenger bag schlitz tofu

Williamsburg master swag vegan.

Bitters cornhole franzen church key you probably haven t heard of them sriracha Pop up master post ironic kinfolk pickled hoodie Jean shorts meggings cray chia cornhole iphone leggings keytar Food truck tumblr roof forage pour over taxidermy Whatever taxidermy vinyl 1 green juice bitters pork belly Vhs pork belly austin shabby chic umami Mustache you probably haven t heard of them portland 90 s tote bag kogi Viral blue bottle asymmetrical Williamsburg five dollar toast whatever vhs poutine viral Cold pressed five dollar toast cred cardigan green juice

Literally everyday

<!-- Accordion type: pipeline -->
<div class="vi-accordion-pipeline vi-accordion" data-autoclose="true" style="--vi-accordion-pipeline-base-color: red">
  <div class="is-active vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-0bb7a8">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-e9d805">Iphone poutine twee distillery try-hard sriracha whatever cardigan.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Irony microdosing neutra.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          ugh
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          readymade
        </li>
      </ul>
      <a aria-controls="region-5bb4e6" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-0bb7a8" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-e9d805" class="vi-accordion-pipeline__main vi-accordion__main" id="region-5bb4e6" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Cleanse gluten-free kogi kombucha bespoke.</h3>
        <p id="sg-26acbc">Gluten free occupy <a href="#sample">chicharrones ugh put</a> <a href="#sample">a bird on</a> it organic blog Bicycle rights tilde pabst artisan brooklyn Retro gentrify post ironic Scenester 90 s viral tacos <a href="#sample">meggings letterpress normcore</a> photo booth Normcore lomo pitchfork Wolf actually dreamcatcher normcore hoodie heirloom Echo chartreuse photo booth gastropub health lomo Freegan cold pressed fashion axe cred Park ugh trust fund Ennui tousled <a href="#sample">vice quinoa paleo</a> Cliche put a bird on it 8 bit echo carry poutine pug hammock Cliche health <a href="#sample">crucifix cred selvage</a></p>
        <h3>Normcore bespoke cold-pressed viral gastropub.</h3>
        <p>Keytar fixie fingerstache waistcoat gluten free <a href="#sample">before they sold</a> out Microdosing polaroid <a href="#sample">plaid artisan next</a> level Cliche irony chia narwhal Selfies 3 wolf moon <a href="#sample">shoreditch listicle Fixie</a> food truck meditation godard bushwick helvetica Sustainable vice artisan Trust fund drinking twee Photo booth <a href="#sample">post ironic readymade</a> keytar carry tilde schlitz Cronut keffiyeh iphone keytar Tattooed sriracha authentic wolf kickstarter iphone organic Microdosing etsy pbr b xoxo pour <a href="#sample">over try hard</a> drinking tilde Fanny pack mumblecore yr lomo cred blue bottle drinking</p>
        <h3>Poutine meditation selvage mlkshk vegan.</h3>
        <p>Ramps direct trade tofu thundercats Portland tote bag tacos Park small batch yolo tote bag trust fund slow carb fashion axe Narwhal chia loko sustainable retro photo booth <a href="#sample">Jean shorts</a> franzen cliche lumbersexual you probably haven t heard of them Sriracha paleo craft beer Microdosing polaroid <a href="#sample">yr Authentic</a> ennui slow carb banjo Mlkshk trust <a href="#sample">fund diy</a> <a href="#sample">tacos cleanse</a> etsy Vinyl hella humblebrag</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-229d19">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-488002">Knausgaard twee williamsburg ramps everyday selvage pickled keffiyeh.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Bushwick tilde taxidermy.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          distillery
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          bushwick
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          leggings
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          shoreditch
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          farm-to-table
        </li>
      </ul>
      <a aria-controls="region-8d98a4" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-229d19" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-488002" class="vi-accordion-pipeline__main vi-accordion__main" id="region-8d98a4" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Squid brooklyn scenester schlitz drinking.</h3>
        <p id="sg-d1e24d">Helvetica green juice iphone tote bag tilde chambray Keffiyeh whatever 90 s cronut truffaut vegan lomo master Taxidermy literally scenester street fixie Organic everyday migas art party <a href="#sample">lumbersexual cray dreamcatcher</a> gentrify Pinterest kogi brooklyn paleo austin semiotics iphone Wes anderson 90 s literally xoxo normcore vice Scenester typewriter <a href="#sample">crucifix hella slow</a> carb Squid iphone mixtape green juice poutine hammock wes <a href="#sample">anderson Narwhal meditation</a> pbr b bespoke waistcoat Disrupt pabst bespoke Drinking mlkshk quinoa celiac kinfolk tumblr disrupt Post ironic semiotics retro phlogiston sartorial cornhole</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-7aa222" style="--vi-accordion-pipeline-base-color: blue">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-23a5ba">Yuccie waistcoat vhs diy diy hella normcore taxidermy.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Cronut venmo tacos.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          meh
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          Godard
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          franzen
        </li>
      </ul>
      <a aria-controls="region-5e2d54" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-7aa222" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-23a5ba" class="vi-accordion-pipeline__main vi-accordion__main" id="region-5e2d54" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Bespoke schlitz gluten-free shoreditch.</h3>
        <p>Skateboard green juice mumblecore park portland Stumptown fixie squid Craft beer vinegar beard ramps vegan Meditation yr fanny pack loko chicharrones Heirloom messenger bag 8 bit photo booth bicycle rights Franzen microdosing flannel polaroid craft beer Pop up migas pabst microdosing fanny pack Viral gluten free plaid art party roof Yr cred schlitz yolo Tilde keffiyeh goth umami actually craft beer kickstarter wolf Pickled offal whatever</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Gentrify 8-bit</a>
      </div>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-16c6a2">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-988b64">cray
          schlitz
        </h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Locavore celiac 8-bit.)
        </span>
        <p>Currently, there is no detailed content available for this drug.</p>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          irony
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          leggings
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          paleo
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          dreamcatcher
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          Thundercats
        </li>
      </ul>
    </div>
  </div>
  <div class="vi-accordion-pipeline__item vi-accordion__item" id="accordion-(1234)-460a01">
    <div class="vi-accordion-pipeline__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <div class="vi-accordion-pipeline__header-text vi-accordion__header-text">
        <h4 class="vi-accordion-pipeline__title vi-accordion__title" id="heading-9a84bb">Beard gluten-free authentic master etsy squid migas franzen.</h4>
        <span class="vi-accordion-pipeline__subtitle vi-accordion__subtitle">
          (Neutra listicle lo-fi.)
        </span>
      </div>
      <ul class="vi-accordion-pipeline__tags vi-accordion__tags">
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          meh
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          shoreditch
        </li>
        <li class="vi-accordion-pipeline__tag vi-accordion__tag">
          gluten-free
        </li>
      </ul>
      <a aria-controls="region-36985c" aria-expanded="false" class="vi-accordion-pipeline__trigger vi-accordion__trigger" href="#accordion-(1234)-460a01" role="button">
      </a>
    </div>
    <div aria-labelledby="heading-9a84bb" class="vi-accordion-pipeline__main vi-accordion__main" id="region-36985c" role="region">
      <div class="vi-accordion-pipeline__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Chillwave portland marfa mlkshk mustache.</h3>
        <p>Intelligentsia keffiyeh literally fashion axe plaid 3 wolf moon humblebrag Marfa trust fund pbr b brunch schlitz literally Vice meh knausgaard health seitan synth authentic Photo booth small batch umami yr paleo williamsburg hammock Goth butcher schlitz brooklyn letterpress retro irony Pinterest park diy skateboard bitters Mumblecore stumptown forage Put a bird on it ramps keytar jean shorts chillwave Bushwick brunch hella trust fund <a href="#sample">mumblecore farm</a> to table Muggle magic thundercats synth fashion axe Ugh pickled you probably haven t <a href="#sample">heard of</a> them narwhal hammock asymmetrical craft beer Twee meditation cornhole 90 s franzen</p>
        <h3>Slow-carb sriracha lumbersexual roof flannel.</h3>
        <p>Blue bottle ethical ennui drinking bushwick Squid hashtag leggings portland Keffiyeh actually raw denim tattooed stumptown pug readymade green juice Neutra franzen gastropub vinegar echo meggings mumblecore craft beer Tumblr letterpress messenger bag cleanse kogi photo booth fingerstache Church key cliche cardigan meh bespoke Food truck iphone flexitarian vinegar kale chips meggings stumptown bespoke Twee meh humblebrag <a href="#sample">Cornhole green juice</a> skateboard stumptown bitters keytar trust fund brunch Poutine brunch chillwave viral crucifix Whatever plaid irony taxidermy ugh messenger bag schlitz tofu</p>
        <h3>Williamsburg master swag vegan.</h3>
        <p>Bitters cornhole franzen church key you probably haven t heard of them sriracha Pop <a href="#sample">up master</a> post ironic kinfolk pickled hoodie Jean shorts meggings cray chia cornhole iphone leggings keytar Food truck tumblr roof forage pour over taxidermy Whatever taxidermy vinyl 1 <a href="#sample">green juice</a> bitters pork belly Vhs pork belly austin shabby chic umami Mustache you probably haven t heard <a href="#sample">of them</a> portland 90 s tote bag kogi Viral blue bottle asymmetrical Williamsburg five dollar toast whatever vhs poutine viral Cold pressed five dollar toast cred cardigan green juice</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Literally everyday</a>
      </div>
    </div>
  </div>
</div>

External Controls #

For all accordion types external "Expand all" / "Collapse all" controls can be applied.

The controls are basically just links with following attributes:

href points to ID of the accordion.
aria-accordion-expand-all="true" for 'Expand all' links.
aria-accordion-collapse-all="true" for 'Collapse all' links.
aria-label is advisable.

Please note that data-autoclose should be false. So autoclose is disabled when using controls.

Expand all / Collapse all

Ugh chicharrones pop-up beard tousled selfies sriracha artisan.

Toggle Ugh chicharrones pop-up beard tousled selfies sriracha artisan.

Plaid occupy church-key authentic.

Cornhole tote bag lo fi kale chips schlitz flannel Cornhole diy tousled food truck taxidermy fanny pack Fingerstache actually cardigan taxidermy Etsy roof seitan ethical Trust fund jean shorts hammock Thundercats austin ethical post ironic actually Microdosing lumbersexual etsy Flexitarian iphone lo fi occupy tacos post ironic letterpress fingerstache Raw denim tilde tumblr knausgaard distillery Umami williamsburg mixtape diy cleanse biodiesel pitchfork

Biodiesel dreamcatcher listicle polaroid.

Bicycle rights cronut brunch meditation Selfies tacos franzen hella hashtag forage Slow carb ennui schlitz Ramps yr keffiyeh chambray cray goth mixtape yolo Semiotics wolf hoodie hashtag pop up gentrify austin Retro cray food truck Direct trade carry umami pop up hammock intelligentsia mixtape leggings Sriracha diy tote bag Microdosing butcher chartreuse health skateboard meditation authentic Deep v gastropub celiac

Kombucha bespoke synth loko vinegar keffiyeh pbr&b flexitarian.

Toggle Kombucha bespoke synth loko vinegar keffiyeh pbr&b flexitarian.

Shoreditch swag mumblecore street cliche.

Cray fingerstache chillwave wes anderson fashion axe street Art party disrupt loko ennui listicle blue bottle organic polaroid Austin tumblr cardigan jean shorts 8 bit biodiesel Occupy flexitarian pug messenger bag single origin coffee chartreuse before they sold out Pabst green juice everyday cliche locavore mixtape swag poutine Pug diy franzen pabst ennui Diy mlkshk ramps hashtag poutine pickled ethical Whatever shoreditch five dollar toast hoodie banjo vinyl Green juice franzen irony Phlogiston church key taxidermy shabby chic 90 s vhs tattooed paleo Vinyl cold pressed ugh squid 1 leggings ramps

Farm-to-table sustainable kombucha whatever cold-pressed.

Tumblr pour over photo booth street vhs quinoa Seitan neutra single origin coffee tumblr jean shorts bushwick portland Ethical hammock authentic cred vinegar muggle magic whatever celiac Truffaut chillwave poutine migas pitchfork muggle magic Lo fi umami muggle magic literally vhs swag organic 3 wolf moon you probably haven t heard of them mlkshk Kombucha godard art party humblebrag lomo bitters Ugh messenger bag cleanse keffiyeh cred Tote bag kinfolk meditation pinterest viral Chambray helvetica etsy meh vegan

Wayfarers hashtag narwhal diy farm-to-table keffiyeh truffaut mumblecore.

Toggle Wayfarers hashtag narwhal diy farm-to-table keffiyeh truffaut mumblecore.

Master try-hard mixtape distillery pabst.

Kinfolk etsy mumblecore trust fund gluten free leggings loko intelligentsia Meggings raw denim marfa Synth keytar everyday cliche semiotics pitchfork raw denim Normcore 1 blog organic Godard loko fanny pack Locavore actually ugh pork belly heirloom Listicle chartreuse tofu bespoke Banjo tofu distillery next level fashion axe stumptown Carry salvia chia stumptown chicharrones drinking waistcoat goth Next level carry slow carb polaroid farm to table fanny pack Pbr b tattooed truffaut kale chips master deep v actually

Yr goth kombucha vinegar crucifix.

Franzen pickled seitan echo chia etsy church key Pickled mustache sustainable gluten free Brunch chartreuse salvia kickstarter hashtag Vegan pbr b hammock meh bitters vinegar Flexitarian normcore salvia umami pitchfork yuccie kickstarter Waistcoat banh mi heirloom 90 s cronut chartreuse lumbersexual Pork belly intelligentsia polaroid chicharrones lomo five dollar toast vinegar green juice Echo vice craft beer Venmo brunch paleo mlkshk shabby chic Artisan chambray pork belly Authentic before they sold out lo fi Tote bag kickstarter chartreuse chillwave trust fund craft beer artisan loko

Vinegar beard

Expand all / Collapse all

Pug poutine everyday listicle echo mixtape kogi austin scenester cred quinoa lumbersexual distillery health roof.

Organic cred pitchfork readymade disrupt helvetica venmo vice franzen cred literally hammock aesthetic whatever authentic.

Marfa pabst yr quinoa pinterest Whatever craft beer artisan offal keffiyeh Wes anderson cray messenger bag cliche lumbersexual Diy wayfarers art party Next level carry art party Put a bird on it forage mustache chambray polaroid celiac Paleo phlogiston chicharrones before they sold out tilde cold pressed Keytar ethical blog vhs 3 wolf moon brunch authentic seitan crucifix ethical organic knausgaard Church key mustache sriracha kombucha organic beard kinfolk gastropub

Normcore bushwick

<div class="d-flex justify-content-between text-muted vi-type vi-type--text-small mb-10">
  <div class="ml-auto">
    <!-- .text-accent-2 used to align with design requirements -->
    <a aria-accordion-expand-all="true" aria-label="Expand all accordion items" class="text-decoration-none text-accent-2" href="#sg-67b816" role="button">
      Expand all
    </a>
    /
    <!-- .text-accent-2 used to align with design requirements -->
    <a aria-accordion-collapse-all="true" aria-label="Collapse all accordion items" class="text-decoration-none text-accent-2" href="#sg-67b816" role="button">
      Collapse all
    </a>
  </div>
</div>
<!-- Accordion type: content -->
<div class="vi-accordion-content vi-accordion" data-autoclose="false" id="sg-67b816">
  <div class="is-active vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-3513cb">
    <div class="vi-accordion-content__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-25e36b">Ugh chicharrones pop-up beard tousled selfies sriracha artisan.</h4>
      <a aria-controls="region-693e51" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-3513cb" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Ugh chicharrones pop-up beard tousled selfies sriracha artisan.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-25e36b" class="vi-accordion-content__main vi-accordion__main" id="region-693e51" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Plaid occupy church-key authentic.</h3>
        <p id="sg-2c2d16">Cornhole tote bag lo fi kale chips schlitz flannel Cornhole diy tousled food truck taxidermy fanny pack Fingerstache actually cardigan taxidermy Etsy roof seitan ethical Trust fund jean shorts hammock <a href="#sample">Thundercats austin</a> <a href="#sample">ethical post</a> <a href="#sample">ironic actually</a> Microdosing lumbersexual <a href="#sample">etsy Flexitarian</a> iphone lo fi occupy tacos post ironic letterpress fingerstache Raw denim tilde tumblr knausgaard distillery Umami <a href="#sample">williamsburg mixtape</a> diy cleanse biodiesel pitchfork</p>
        <h3>Biodiesel dreamcatcher listicle polaroid.</h3>
        <p>Bicycle rights cronut brunch meditation Selfies tacos franzen hella hashtag forage Slow carb ennui schlitz Ramps yr keffiyeh chambray cray goth mixtape yolo Semiotics wolf hoodie hashtag pop up gentrify austin Retro cray food truck Direct <a href="#sample">trade carry umami</a> pop up hammock intelligentsia mixtape leggings Sriracha diy tote bag Microdosing butcher chartreuse health skateboard <a href="#sample">meditation authentic Deep</a> v gastropub celiac</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-89524c">
    <div class="vi-accordion-content__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-976204">Kombucha bespoke synth loko vinegar keffiyeh pbr&amp;b flexitarian.</h4>
      <a aria-controls="region-c047c3" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-89524c" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Kombucha bespoke synth loko vinegar keffiyeh pbr&amp;b flexitarian.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-976204" class="vi-accordion-content__main vi-accordion__main" id="region-c047c3" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Shoreditch swag mumblecore street cliche.</h3>
        <p id="sg-437304">Cray fingerstache chillwave wes anderson fashion axe street Art party <a href="#sample">disrupt loko</a> <a href="#sample">ennui listicle</a> blue bottle <a href="#sample">organic polaroid</a> Austin tumblr cardigan jean shorts 8 bit biodiesel Occupy flexitarian pug messenger bag single origin coffee <a href="#sample">chartreuse before</a> they sold out Pabst green juice everyday cliche locavore mixtape swag poutine <a href="#sample">Pug diy</a> franzen pabst ennui Diy mlkshk ramps hashtag poutine pickled ethical Whatever shoreditch five dollar toast hoodie <a href="#sample">banjo vinyl</a> Green juice franzen irony Phlogiston church key taxidermy shabby chic 90 s vhs tattooed paleo Vinyl cold pressed ugh squid 1 leggings ramps</p>
        <h3>Farm-to-table sustainable kombucha whatever cold-pressed.</h3>
        <p>Tumblr pour over photo booth street vhs quinoa Seitan neutra single origin coffee tumblr <a href="#sample">jean shorts</a> <a href="#sample">bushwick portland</a> <a href="#sample">Ethical hammock</a> authentic cred vinegar muggle <a href="#sample">magic whatever</a> <a href="#sample">celiac Truffaut</a> chillwave poutine migas pitchfork muggle magic Lo fi umami muggle magic literally vhs swag organic 3 <a href="#sample">wolf moon</a> you probably haven t <a href="#sample">heard of</a> them mlkshk Kombucha godard art party humblebrag lomo <a href="#sample">bitters Ugh</a> messenger bag cleanse keffiyeh cred Tote bag kinfolk meditation pinterest <a href="#sample">viral Chambray</a> helvetica etsy meh vegan</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-content__item vi-accordion__item" id="accordion-(1234)-994de9">
    <div class="vi-accordion-content__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-content__title vi-accordion__title" id="heading-06b288">Wayfarers hashtag narwhal diy farm-to-table keffiyeh truffaut mumblecore.</h4>
      <a aria-controls="region-006739" aria-expanded="false" class="vi-accordion-content__trigger vi-accordion__trigger" href="#accordion-(1234)-994de9" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Wayfarers hashtag narwhal diy farm-to-table keffiyeh truffaut mumblecore.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-06b288" class="vi-accordion-content__main vi-accordion__main" id="region-006739" role="region">
      <div class="vi-accordion-content__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <h3>Master try-hard mixtape distillery pabst.</h3>
        <p>Kinfolk etsy mumblecore trust fund gluten free leggings loko intelligentsia Meggings raw denim marfa Synth keytar <a href="#sample">everyday cliche</a> semiotics pitchfork raw denim <a href="#sample">Normcore 1</a> blog organic <a href="#sample">Godard loko</a> fanny pack Locavore actually ugh pork belly heirloom Listicle chartreuse tofu bespoke Banjo tofu distillery next level fashion axe stumptown Carry salvia chia stumptown chicharrones drinking waistcoat goth Next level carry slow carb polaroid farm to table fanny pack Pbr b tattooed truffaut kale <a href="#sample">chips master</a> deep v actually</p>
        <h3>Yr goth kombucha vinegar crucifix.</h3>
        <p>Franzen pickled seitan echo chia etsy church key Pickled mustache sustainable gluten free Brunch chartreuse salvia kickstarter hashtag Vegan pbr b hammock meh bitters vinegar Flexitarian normcore salvia umami pitchfork yuccie kickstarter Waistcoat banh mi heirloom 90 s cronut chartreuse lumbersexual Pork belly intelligentsia polaroid chicharrones lomo five dollar toast vinegar green juice Echo vice craft beer Venmo brunch paleo mlkshk shabby chic Artisan chambray pork belly Authentic before they sold out lo fi Tote bag kickstarter chartreuse chillwave trust fund craft beer artisan loko</p>
        <!-- Button type: solid  -->
        <a href="#" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Vinegar beard</a>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="d-flex justify-content-between text-muted vi-type vi-type--text-small mb-10">
  <div class="ml-auto">
    <!-- .text-accent-2 used to align with design requirements -->
    <a aria-accordion-expand-all="true" aria-label="Expand all accordion items" class="text-decoration-none text-accent-2" href="#sg-510194" role="button">
      Expand all
    </a>
    /
    <!-- .text-accent-2 used to align with design requirements -->
    <a aria-accordion-collapse-all="true" aria-label="Collapse all accordion items" class="text-decoration-none text-accent-2" href="#sg-510194" role="button">
      Collapse all
    </a>
  </div>
</div>
<!-- Accordion type: refine -->
<div class="vi-accordion-refine vi-accordion" data-autoclose="false" id="sg-510194">
  <div class="is-active vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-3c72a4">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-169022">Cold-pressed flexitarian lomo portland pop-up keytar +1 kombucha.</h4>
      <a aria-controls="region-b44cbb" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-3c72a4" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Cold-pressed flexitarian lomo portland pop-up keytar +1 kombucha.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-169022" class="vi-accordion-refine__main vi-accordion__main" id="region-b44cbb" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Pug poutine everyday listicle echo mixtape kogi austin scenester cred quinoa lumbersexual distillery health roof.</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-a2ada3">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-a213a9">Pbr&amp;b occupy flexitarian skateboard vinegar viral crucifix tumblr.</h4>
      <a aria-controls="region-075929" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-a2ada3" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Pbr&amp;b occupy flexitarian skateboard vinegar viral crucifix tumblr.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-a213a9" class="vi-accordion-refine__main vi-accordion__main" id="region-075929" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Organic cred pitchfork readymade disrupt helvetica venmo vice franzen cred literally hammock aesthetic whatever authentic.</p>
      </div>
    </div>
  </div>
  <div class="vi-accordion-refine__item vi-accordion__item" id="accordion-(1234)-9b7a7b">
    <div class="vi-accordion-refine__header vi-accordion__header">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-accordion-refine__title vi-accordion__title" id="heading-026974">Gluten-free seitan gentrify lo-fi portland franzen microdosing irony.</h4>
      <a aria-controls="region-d45ad0" aria-expanded="false" class="vi-accordion-refine__trigger vi-accordion__trigger" href="#accordion-(1234)-9b7a7b" role="button">
        <!-- Button type: generic  -->
        <div class="vi-btn-generic vi-btn-generic--circular vi-btn-generic--nested vi-btn-generic--fit vi-btn"><span class="vi-btn-generic__label vi-btn__label">Toggle
            Gluten-free seitan gentrify lo-fi portland franzen microdosing irony.</span></div>
      </a>
    </div>
    <div aria-labelledby="heading-026974" class="vi-accordion-refine__main vi-accordion__main" id="region-d45ad0" role="region">
      <div class="vi-accordion-refine__content  vi-typesystem vi-typesystem--collapse-last vi-accordion__content">
        <p>Marfa pabst yr quinoa pinterest Whatever craft beer artisan offal keffiyeh Wes anderson cray messenger bag cliche lumbersexual Diy wayfarers art party Next level carry art party Put a bird on it forage mustache chambray polaroid celiac Paleo phlogiston chicharrones before they sold out tilde cold <a href="#sample">pressed Keytar</a> ethical blog vhs 3 wolf moon brunch authentic seitan crucifix ethical organic knausgaard Church key mustache sriracha kombucha organic beard kinfolk gastropub</p>
        <!-- Button type: outline  -->
        <a href="#" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn">Normcore bushwick</a>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Accordion JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  31 Mar 2025 - fix(accordion): icon sizing and spacing on mobile and desktop
  05 Mar 2025 - fix(accordion): adjust scrollIntoView to center the element
  24 Feb 2025 - fix(accordion): ensure boolean values for active state checks
  16 Dec 2024 - fix(accordion): increase header padding according design.
  17 May 2024 - Preserve query and hash with replace to fix multiple browser back button clicks needed to go back.
  06 Feb 2023 - Removed replacing history state to adding the state of the accordion to fix query being removed when using accordion.
  10 May 2023 - Button focus outline visible on accordion trigger.
  03 Mar 2023 - Expand / Collapse buttons, when “inactive”, still clickable
  11 Aug 2022 - Fix overlap title and button.
  10 Aug 2022 - Fix open close icon when used in modal.
  Escape meta characters in url fragment.
  Incorrect icon state (+/-) on keyboard navigation
  Incorrect icon state (+/-) when opened by #hash link
  Regression introduced by accessibility changes where the item is not opening automatically
Please note that Timeline Era needs to update the css,
as it depends on the Accordion


Changed

  16 Nov 2023 - Add ability to use icon or image next to title of Content Accordion
  28 Jun 2022 - Add modifier --transscript to Accordion type refine
  20 Jun 2022 - CSS change to easier allow color variations on refine variation
  Do not act on hash links when not explicitly set to do so.
  Extended BPS support to refine variation
  A11y Add role="button" to element a.vi-accordion__trigger
  CSS Optimized for print.
  Print: css adjustments
  Ensure no animation on component initiation.
  Accessibility: Expandable and collapsible regions
  Clarify documentation on autoclose.


Added

  25 Apr 2025 - feat(accordion): add data-disable-hash-change option
  17 Dec 2024 - feat(accordion): add item-without-content item and styles
  22 Nov 2024 - feat(accordion): allow to target content of accordion with hash link
  Support for external controls
  PBS support
  RTL support
  Example of accordion with a button.
  Initial draft

Accordion

Content #

Butcher selfies flannel etsy cold-pressed microdosing try-hard leggings.

Viral mlkshk meh pour-over blog.

Franzen viral taxidermy beard narwhal literally readymade vinegar.

Ennui cornhole letterpress pbr&b.

Chillwave neutra synth brooklyn pug lomo yolo butcher.

Meditation try-hard master sartorial flexitarian.

Retro squid flexitarian chia.

Meditation stumptown mlkshk scenester.

Park literally yuccie cray marfa typewriter paleo meggings.

Sustainable flannel ramps loko irony.

Intelligentsia ethical chicharrones skateboard.

Iphone cronut gentrify brooklyn meh.

Viral brooklyn authentic forage echo vinyl everyday ramps.

Master twee sriracha taxidermy farm-to-table.

Cliche shoreditch chambray chambray selfies.

Kinfolk slow-carb wolf cred.

Humblebrag hashtag kitsch chicharrones williamsburg cleanse cardigan distillery.

Shoreditch loko intelligentsia asymmetrical.

Cleanse portland letterpress yolo cardigan.

Locavore narwhal portland fixie twee.

Pug wolf vinyl beard distillery tumblr kombucha hoodie.

Wolf lumbersexual flexitarian carry.

Microdosing pop-up cold-pressed beard.

Twee drinking slow-carb skateboard brunch.

Diy cleanse meggings readymade sustainable carry banjo mustache.

Seitan letterpress poutine wolf polaroid.

Umami goth tilde ugh chicharrones.

Post-ironic shoreditch dreamcatcher try-hard portland post-ironic hella cray.

Mustache synth etsy ugh try-hard.

Church-key lo-fi locavore actually crucifix.

Refine #

Irony cred church-key beard pabst cleanse post-ironic aesthetic.

Typewriter bespoke vinyl beard cliche taxidermy ennui actually.

Roof listicle authentic lomo kitsch 90's keffiyeh leggings.

Pipeline #

Street sartorial park brooklyn try-hard tattooed kitsch pickled.

Cronut ennui loko disrupt.

Occupy tacos hashtag skateboard gastropub.

Meh carry tumblr mixtape retro squid vinegar ennui.

Kombucha lumbersexual pop-up sustainable.

Sartorial wayfarers typewriter letterpress vhs.

Forage cronut dreamcatcher farm-to-table.

Hoodie umami selvage everyday literally distillery tumblr heirloom.

Franzen taxidermy helvetica carry.

knausgaard Godard

Butcher keffiyeh kitsch cliche sustainable tattooed church-key kickstarter.

Microdosing aesthetic selvage mlkshk shoreditch.

Iphone poutine twee distillery try-hard sriracha whatever cardigan.

Cleanse gluten-free kogi kombucha bespoke.

Normcore bespoke cold-pressed viral gastropub.

Poutine meditation selvage mlkshk vegan.

Knausgaard twee williamsburg ramps everyday selvage pickled keffiyeh.

Squid brooklyn scenester schlitz drinking.

Yuccie waistcoat vhs diy diy hella normcore taxidermy.

Bespoke schlitz gluten-free shoreditch.

cray schlitz

Beard gluten-free authentic master etsy squid migas franzen.

Chillwave portland marfa mlkshk mustache.

Slow-carb sriracha lumbersexual roof flannel.

Williamsburg master swag vegan.

External Controls #

Ugh chicharrones pop-up beard tousled selfies sriracha artisan.

Plaid occupy church-key authentic.

Biodiesel dreamcatcher listicle polaroid.

Kombucha bespoke synth loko vinegar keffiyeh pbr&b flexitarian.

Shoreditch swag mumblecore street cliche.

Farm-to-table sustainable kombucha whatever cold-pressed.

Wayfarers hashtag narwhal diy farm-to-table keffiyeh truffaut mumblecore.

Master try-hard mixtape distillery pabst.

Yr goth kombucha vinegar crucifix.

Cold-pressed flexitarian lomo portland pop-up keytar +1 kombucha.

Pbr&b occupy flexitarian skateboard vinegar viral crucifix tumblr.

Gluten-free seitan gentrify lo-fi portland franzen microdosing irony.

Stylesheets #

JavaScript #

Usage documentation #

Changelog #

Changelog