Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

-

Accordions (legacy)

Basic

3.x markup

2.x markup

  • Necessitatibus laboriosam quas

    Consequuntur sequi qui et. qui rerum sit voluptatibus consequatur ipsa sunt nulla consectetur libero consequuntur. qui ad eos non dolorum est dolorem doloribus. ullam distinctio vero sequi adipisci inventore pariatur rerum expedita rerum eligendi. repellendus et nam et Qui laborum quasi hic et. qui iure voluptatibus qui ex nesciunt. sed voluptatem ipsum aut facilis voluptatibus ut facere libero aspernatur natus. est inventore nostrum et eos corporis consequuntur dicta nemo deserunt adipisci. nam asperiores velit quis quibusdam quia quos id excepturi quo. consequuntur adipisci sequi tenetur et ut expedita accusamus quae ut autem Distinctio omnis ipsam veniam delectus commodi dolorem deserunt non qui iusto. ipsam molestiae commodi dolor soluta libero quos quod qui unde veritatis explicabo laudantium occaecati. sunt iusto praesentium expedita voluptas blanditiis id voluptas et mollitia nobis rerum velit. et ullam non et est iste ratione a et nobis enim. sit corrupti ut quia quis aperiam deserunt soluta error itaque velit doloremque

  • Rerum numquam est

    Necessitatibus enim porro perspiciatis qui dolor. voluptate ut provident voluptate quis laboriosam nesciunt qui voluptas ratione ullam. in aut alias aut et quo magnam quod et eligendi dignissimos quia soluta. repellat molestias reprehenderit vero enim. laborum non repellendus sed sint architecto esse blanditiis ullam et officiis illum

  • Dolores esse magnam

    Aut commodi quas velit quia. mollitia praesentium optio assumenda ea dolorem est. ea aut eaque atque sunt a Inventore numquam eos sint adipisci aperiam quia aliquam aut nesciunt rerum esse in deleniti in. temporibus a enim neque. fuga quo illum voluptates velit recusandae quo provident. autem est cum est iure nemo. odio est nemo dolorem laborum possimus. suscipit ut officia nulla. nesciunt et distinctio ut similique odio laudantium Ipsam modi porro impedit voluptatem ut nam facilis ut omnis in sunt. laudantium itaque est non sequi maxime ipsam sed assumenda. eum nam vero dolorem omnis at excepturi nihil non iusto voluptas culpa repellendus

<!-- START widgets/acccordion component -->
<ul class="accordion" data-accordion-controls="true">
  <li class="accordion__child">
    <h2 id="accordion-a1" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a1-panel">Et quos blanditiis</h2>
    <div id="accordion-a1-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a1" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Sit et officia doloremque ratione doloremque possimus adipisci vero est. error soluta consequuntur non et facilis eligendi non nulla placeat nulla et. magnam quos ipsa molestias ad illo autem hic vel ab sequi explicabo. debitis pariatur odio aut labore sed. voluptatem accusamus voluptatibus at distinctio illum ullam dolore

Quod consequatur ducimus qui harum tempore eveniet modi quas recusandae. ex nam voluptas esse soluta voluptatibus facilis est non voluptatem illum. velit reprehenderit et corporis earum. optio enim nostrum est dignissimos minus temporibus aut libero nemo consequatur et aspernatur necessitatibus odit</p>
      </div>
    </div>
  </li>
  <li class="accordion__child">
    <h2 id="accordion-a2" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a2-panel">Modi ab quod</h2>
    <div id="accordion-a2-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a2" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Eos asperiores consequatur dignissimos cum dignissimos modi inventore. illum saepe odit libero voluptas. perspiciatis sit consequatur architecto ipsam non ratione aut cupiditate earum quaerat eius inventore illo</p>
      </div>
    </div>
  </li>
  <li class="accordion__child">
    <h2 id="accordion-a3" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a3-panel">Assumenda molestiae quia</h2>
    <div id="accordion-a3-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a3" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Quo sunt qui ea et repudiandae cum id ut voluptatem. et aperiam et assumenda ratione impedit voluptatem dicta molestias mollitia molestiae reprehenderit autem dolor. sit suscipit quia optio assumenda veritatis doloremque dolorem sunt officiis aut error officia dolorem ipsa

Aliquid maxime nulla facilis. totam quis eos quis sit hic. et unde minima mollitia fugiat accusantium alias aspernatur. sapiente iusto tenetur assumenda vero id omnis aspernatur alias ipsam placeat ut voluptates aut beatae. voluptatem est non incidunt. occaecati qui qui autem sed in ut libero ex

Dolore dolorum nisi unde enim reiciendis temporibus accusantium velit. commodi tempora enim totam dolor qui corrupti ea illum sed vero autem rerum dolorum. repellendus deserunt a sapiente est ipsum autem ex ut culpa odit quia praesentium saepe architecto. maiores deleniti blanditiis at et excepturi. asperiores quasi itaque reiciendis sint fugiat odit cupiditate voluptatum eum sit distinctio</p>
      </div>
    </div>
  </li>    
</ul>
<!-- END widgets/acccordion component -->

Clear

3.x markup

2.x markup

  • Placeat et magni

    Quibusdam est sit vitae. tempore ex nostrum beatae voluptas dolorum qui et similique non eos impedit. rerum ipsa mollitia distinctio odio sed cupiditate ipsam sed quia. impedit quidem veniam repudiandae omnis odio et deleniti Tenetur fugiat voluptatem et consequatur reprehenderit perferendis laboriosam nobis non aperiam eligendi. quis in fuga sed aut. enim iste omnis eos Vitae nihil cumque sit qui omnis quia. eos delectus et qui deserunt nostrum impedit delectus quis error voluptatem magni. soluta ea sequi facilis non perspiciatis est aliquam consequatur. eos omnis eligendi voluptatem quam ut qui qui quaerat facere. eveniet adipisci adipisci eum tenetur non modi inventore necessitatibus deserunt quis consectetur. veniam laudantium quia magnam sint quis est dolores distinctio voluptas earum magni. consectetur possimus ad autem exercitationem distinctio omnis totam odio voluptate sit doloremque

  • Quisquam soluta ut

    Id dicta voluptas necessitatibus sunt soluta aut omnis quae aut sit id. sit omnis sit enim et. rem nobis repellat in illum officia suscipit et. quis sed distinctio rerum perspiciatis et accusamus. nemo laboriosam nam atque quasi temporibus nostrum. assumenda explicabo possimus ea sequi minus magni labore sunt in fuga voluptatem fuga. possimus corrupti quia alias harum consequuntur ut excepturi labore in nulla enim ut

  • Ab fugit asperiores

    Hic autem sed eum eveniet. sed vero voluptas est quia dolorem iste fugit officia quidem. repellendus rerum repellendus placeat dolor minus quia fuga odit eius In voluptatibus ab velit nobis adipisci porro. aliquam qui est voluptas ut rerum vero et a molestiae et odit ut. velit ex in et. quia autem rerum mollitia perspiciatis et aut beatae ut et possimus voluptas ut quia Ea sit fugiat vero nulla fugit. officia consequuntur sed cupiditate aut et quo fuga et aut libero pariatur sed perferendis. cupiditate neque est vel quis ut praesentium quo sequi in deserunt rerum saepe provident

<!-- START widgets/acccordion component -->
<ul class="accordion accordion--clear" data-accordion-controls="true">
  <li class="accordion__child">
    <h2 id="accordion-a1" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a1-panel">Assumenda soluta aut</h2>
    <div id="accordion-a1-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a1" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>At aut nesciunt quo veniam voluptas repellendus amet expedita facilis qui exercitationem numquam. ad sed ipsa consequuntur consequatur recusandae quis sed est et. vero ea rerum temporibus nihil est et ut rem ut eos. corporis dicta eligendi aut assumenda ratione commodi voluptas quia necessitatibus eius illum

Voluptatem et aut autem. aut et perspiciatis eaque neque rerum eaque placeat dolorum unde. mollitia enim maiores aliquid illo dicta enim nulla ab rerum</p>
      </div>
    </div>
  </li>
  <li class="accordion__child">
    <h2 id="accordion-a2" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a2-panel">Aut ea quo</h2>
    <div id="accordion-a2-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a2" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Maiores quo rerum ipsam labore nostrum saepe sed exercitationem rerum. ad ut suscipit possimus voluptas ut incidunt dolores ipsam voluptatum expedita nulla enim. earum sapiente et fuga aut dolor laudantium rerum in veniam debitis magnam. deserunt quia neque dolores doloremque laborum optio est quas quisquam quo expedita mollitia dolorem. esse tempora consequuntur quasi suscipit rerum occaecati sunt autem vel et cupiditate. officia quo nihil tempore. consectetur consectetur ab quod corporis non esse atque unde vel</p>
      </div>
    </div>
  </li>
  <li class="accordion__child">
    <h2 id="accordion-a3" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a3-panel">Sint voluptatem voluptas</h2>
    <div id="accordion-a3-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a3" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Vitae rerum aspernatur repudiandae fuga vero quisquam. qui omnis doloremque corporis. atque quo alias velit rerum fuga eum vero. earum facilis id rerum iste. voluptatem dolorem numquam ut voluptatem modi nihil ut. voluptas non rerum cupiditate itaque a eos a cum sit et voluptatem ut dolore

Est ex quae modi eveniet omnis fuga eos. qui laboriosam id est id molestiae distinctio quae accusantium quidem culpa. inventore ut cupiditate ullam animi soluta voluptas aut. et dolores et soluta accusantium nam officiis temporibus provident qui est consequatur molestiae. deserunt et omnis nulla ea aut

Pariatur vero iste deserunt in ab ullam eos sit rerum et cumque fugit itaque sed. accusantium rerum voluptates ab aut consequatur omnis asperiores dicta amet eligendi iusto enim ut. consequuntur voluptas non sint dolore. minima inventore in illo et voluptas facilis aspernatur fugit ab voluptatem non. blanditiis itaque voluptas maiores dolor ipsa eum minus. earum est magnam amet modi est voluptatibus dignissimos nam iste. est molestiae dolorem et molestiae suscipit architecto voluptatem rem quia blanditiis</p>
      </div>
    </div>
  </li>    
</ul>
<!-- END widgets/acccordion component -->

Highlight

3.x markup

2.x markup

  • Sunt unde fugit

    At rerum earum voluptatem aut. tenetur similique nisi exercitationem et dolorum voluptatem aliquid aut placeat delectus dolorem. ad est eos minus quibusdam. id aut quae illo nesciunt et iusto illum voluptatem incidunt laboriosam sit sed est nam. asperiores iusto ut ipsam rerum ea hic aliquid rem voluptatem harum quam nihil et. quibusdam distinctio iste vel Voluptas ipsam magnam iste minima cumque assumenda velit quibusdam et error ut voluptatem. earum accusantium sit dolores distinctio quam possimus rerum et. ratione sunt repudiandae accusamus sint aliquam dolorum at odit vero. modi consequatur vel in ipsa quos excepturi omnis voluptate qui ut quis porro veniam quis. dolor et dolores consequatur molestiae dolorem excepturi veniam quis sed vero fugit animi. ducimus placeat voluptatem et dolorem ullam similique placeat soluta fugiat. ut rerum recusandae excepturi ut consequuntur sint pariatur Praesentium deleniti repellat et voluptatem dicta eaque qui laborum nobis consequatur. dignissimos officia consequatur non. omnis eum neque fuga ratione aut quis nesciunt aut enim. natus et aut itaque eos accusamus laborum velit officia perferendis velit rerum in delectus. eveniet excepturi dolores at ipsum ut unde aut totam assumenda culpa. et perferendis saepe id qui qui sapiente consectetur est

  • Mollitia fugit deleniti

    Vel aliquid ea voluptate quaerat reiciendis est labore. non ea ullam ducimus dolor delectus et laudantium vero dolores eum quo. iste quia ullam unde laudantium qui fuga assumenda autem consequatur rem. maiores sunt perspiciatis possimus aspernatur nostrum consequuntur possimus dignissimos placeat rerum error eos non placeat. saepe maiores maiores explicabo ullam quo et doloribus quo atque

  • Repellendus sit voluptatum

    Et sunt alias sit veniam est soluta architecto quisquam. possimus laboriosam doloribus voluptate. consectetur est reprehenderit quidem velit at minima quia illum excepturi est temporibus impedit enim. aperiam unde ducimus veritatis aut. eos maiores sed enim quidem Voluptas voluptatem vero maxime id qui officiis asperiores aut molestias esse aspernatur recusandae doloribus nulla. sunt odio in dolores ad at. vitae non culpa corrupti maxime perspiciatis Ex impedit hic dolores soluta id a enim consequatur voluptates inventore quia. magni qui esse ut repellendus ratione quia similique quae repellendus error dolorem ipsam vel itaque. at vero cupiditate sed commodi repellendus laborum nisi perferendis

<!-- START widgets/acccordion component -->
<ul class="accordion accordion--highlight" data-accordion-controls="true">
  <li class="accordion__child">
    <h2 id="accordion-a1" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a1-panel">Modi incidunt temporibus</h2>
    <div id="accordion-a1-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a1" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Ea vitae et architecto perferendis et sunt iusto ullam est vel non beatae amet. ut vitae quidem sed corporis adipisci ut. qui nulla omnis omnis sit aut vel facere pariatur qui nesciunt qui voluptas et unde. dignissimos dolorem necessitatibus dolores alias qui voluptatum quia molestiae nemo aut. sunt nesciunt corrupti rerum animi deleniti ipsa necessitatibus velit blanditiis repudiandae consectetur pariatur ad accusamus. animi deleniti cumque vero minima at saepe excepturi perferendis cupiditate voluptas commodi. quos fugit autem repellat voluptatum dolorem

Ipsam debitis unde sunt aliquam culpa. qui est et quia iure ipsam iste. perspiciatis voluptas impedit sequi omnis dolores veritatis ratione ipsa dolores est tempora sint commodi aut. totam nostrum sit et quaerat et dicta maxime et. ut ratione voluptatibus reiciendis ea tempore optio iusto assumenda voluptate. ut reprehenderit suscipit et velit est corporis</p>
      </div>
    </div>
  </li>
  <li class="accordion__child">
    <h2 id="accordion-a2" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a2-panel">Fugit nostrum quas</h2>
    <div id="accordion-a2-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a2" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Qui quo in sed ut. fuga enim unde voluptatem cupiditate qui modi nisi laboriosam aut. dolore nulla accusamus sint doloremque neque doloribus deserunt repellendus omnis consequatur nihil nisi. nihil ratione voluptatem architecto suscipit quisquam voluptatibus iusto odit dolorem</p>
      </div>
    </div>
  </li>
  <li class="accordion__child">
    <h2 id="accordion-a3" data-accordion-trigger class="accordion__toggle" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-a3-panel">Illo tempora nobis</h2>
    <div id="accordion-a3-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-a3" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Voluptatum voluptatem odit ut. atque id dolorum velit fugit dolores quae inventore iure iure. minima est atque rerum et aut quis aut et quia. architecto quo dicta incidunt saepe alias excepturi sapiente qui

Natus veniam id expedita aut minima odit possimus voluptas asperiores delectus molestias adipisci dicta. natus atque eum quasi commodi cumque sed animi est quibusdam autem labore. et ea corrupti maxime incidunt animi culpa atque nisi. natus sunt numquam assumenda delectus vitae saepe in. occaecati quod nihil aut non tenetur cumque

Provident possimus rerum perferendis velit sequi ipsa qui quia beatae et eaque. dolor et quia enim architecto est impedit ut blanditiis molestias harum quo quaerat temporibus quod. quibusdam reprehenderit ut perferendis repellat modi laudantium voluptas maiores ex fugiat et expedita perferendis ratione. cupiditate assumenda maxime qui ullam</p>
      </div>
    </div>
  </li>    
</ul>
<!-- END widgets/acccordion component -->

Nested (deprecated)

3.x markup

2.x markup

  • Accusantium ut est

    Dicta at molestias ab voluptatem rem. totam in dolorum sit id in libero quis ad ut. et assumenda consequatur aut aut. asperiores incidunt dignissimos ullam perspiciatis id sint quod tenetur saepe fugit est sed. praesentium voluptas rerum ut mollitia. quis quis repellendus quia voluptate occaecati ducimus omnis dignissimos ducimus aut deleniti delectus a. dicta minus quia sed et in Qui nisi omnis illum aliquam accusantium eveniet ut ut odio amet. aut cupiditate magni similique et atque. qui quia ducimus est voluptate aperiam aliquam ad laudantium. et et et quis. blanditiis ut et expedita ex ex iure voluptas sed deleniti excepturi in repudiandae quia. culpa quis sed velit repellat dolorem aut explicabo repellendus expedita Id deleniti consequuntur deleniti aut mollitia qui mollitia pariatur est sapiente. totam expedita officia id corporis magnam rem magnam. quisquam illum atque at repellat nobis suscipit vel ut ad ea omnis sed saepe magni

  • Facilis praesentium a
    • Id doloribus beatae

      Est libero natus tempora officiis dolor asperiores corrupti et enim quibusdam enim. qui ut ad consequatur odio non corrupti doloremque. consequuntur sit tempora qui rerum inventore delectus consectetur. dolor animi occaecati molestiae voluptas aut sint id voluptas quaerat voluptatibus. molestiae sit tenetur officia rerum dicta exercitationem itaque quia et vero. dolores sapiente reiciendis maiores eligendi et minus reprehenderit. nobis ex aut illum accusantium qui nulla voluptatum dolorem ut architecto voluptatem Ad tenetur quia tenetur sapiente sunt repellat facere iusto sint temporibus tempore. voluptatem modi voluptatum sed asperiores illo odio dolores odit voluptatem est consequatur sapiente. cupiditate consequatur laboriosam quidem et ducimus laborum omnis autem expedita. suscipit voluptatem ut consequatur et. aut asperiores ut animi labore voluptas sunt dicta illum illo omnis. molestias nihil velit voluptates ut ipsum et quam placeat minima enim consectetur. tempora repellat doloribus nobis Quo nemo explicabo voluptate rem est eos et officiis. omnis labore provident porro sed consequatur cumque architecto repellat consequatur cum nam. nam sed nobis omnis voluptatem est architecto omnis fugit ex optio dolor ut ratione laudantium. laudantium ducimus nam alias facere enim omnis cumque voluptas et

    • Adipisci molestiae enim

      Voluptatem enim cupiditate tempora sed sapiente cupiditate sed earum magnam similique ea deserunt. earum fugit iste et molestias minima ducimus. aut earum voluptatum odit recusandae et minus accusantium Sunt doloremque quis quia quia ex expedita ex sit iste laborum esse maiores aperiam. tenetur assumenda neque enim illum natus possimus numquam architecto consequatur repellat dolorem. suscipit tenetur qui quam omnis inventore quaerat voluptatem repellat earum facere et voluptatibus voluptas. dolorem nostrum fugit eos reprehenderit itaque eum quis maiores corporis explicabo et quia fuga Iusto velit voluptas odit cumque laborum et ab ab est. omnis odit blanditiis sint omnis aliquam velit ut sit. occaecati molestias ab autem itaque cupiditate et sit ratione rem voluptatum. nostrum nostrum magni explicabo modi. qui possimus aspernatur ut placeat quibusdam odio veritatis ut iure exercitationem neque. exercitationem nesciunt labore omnis est quaerat et corrupti

    • Vel vel aut

      Esse distinctio nostrum et qui neque velit non qui delectus. et eligendi recusandae expedita temporibus non cum id saepe. repellat magnam omnis voluptatem consequatur dignissimos voluptates nihil velit. iure qui voluptas eligendi sint quaerat nemo nostrum quae aut. similique eius illum beatae ab reprehenderit voluptas expedita Nesciunt tempore ratione necessitatibus ut tempora eaque. qui dignissimos maiores et fuga veniam culpa. omnis mollitia nemo qui. in et nam in quaerat quam eos molestiae aliquam repellendus cupiditate animi. corrupti corporis eveniet modi iure voluptatibus nihil harum. sit tempora recusandae sed maxime non ullam voluptatum culpa facere molestias qui Soluta omnis enim consequuntur illo enim voluptates velit quasi quis porro laborum autem voluptatem tempore. non est tenetur quisquam ab aut placeat non cum reprehenderit voluptatum consequuntur adipisci incidunt. quia nihil et eius cum doloremque et voluptas blanditiis. maiores fugit maiores et laudantium. iusto excepturi nobis molestias magnam illum recusandae quis qui et voluptatibus. ratione minus quia excepturi

    • Est eius labore

      Aperiam aut nihil numquam iusto labore molestiae laboriosam praesentium et. sit dolorem voluptatum sunt in recusandae esse molestiae quidem soluta ut accusamus molestiae eveniet odit. autem quia ut voluptatem ea fugit ipsa explicabo facilis sint molestias. cum suscipit corrupti quo ipsam fuga. dolores sint numquam dolor. possimus aliquid ut libero facilis adipisci harum omnis in est possimus Est libero praesentium omnis omnis dolorum veniam voluptas illo exercitationem. qui sunt sed ea dicta delectus iure veniam dolorum est cupiditate ipsum nobis. eos at porro cumque non accusamus. quae consequatur maiores fuga Earum esse aspernatur voluptatem ad voluptatibus aut eaque qui vel. voluptatum molestias ipsum alias alias quos occaecati perferendis porro aliquam consequuntur a. et ea et id nemo similique laborum sint harum voluptatem facere

  • At nisi deleniti

    Ratione cumque dicta omnis repellat reprehenderit itaque aut soluta cumque explicabo. alias dolores nam aut maiores non sapiente neque. ad animi adipisci cum architecto quod doloremque sint qui libero Aut dolores rerum quia impedit dolorem veniam ut quia natus sit minus placeat. repudiandae sed placeat similique perferendis rerum unde nulla accusamus fuga vel illo aspernatur. ut consequuntur laudantium eius. eum explicabo animi voluptatem maiores vitae cum eos repellat beatae necessitatibus et veritatis aut Nihil nisi totam quas quis expedita sapiente architecto exercitationem aut. maxime quae rerum quibusdam sit. repudiandae atque molestiae voluptatem

Buttons

3.x markup

  • Et aut dolorem ut sit similique

3.x markup

  • Ea sit non rerum praesentium qui qui fugiat soluta facere suscipit consequatur excepturi quia non

<!-- START widgets/acccordion-buttons component -->
<ul class="accordion accordion--clear" data-accordion-controls="true">
  <li class="accordion__child">
    <div id="accordion-ab1" data-accordion-trigger class="accordion__toggle accordion__toggle--buttons" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-ab1-panel">
      <h2 class="accordion__label">Magnam distinctio non sed quia ut reiciendis nesciunt ratione voluptatibus hic ut quae sit occaecati</h2><span class="accordion__buttons"><button href="#" class="button button--small" role="button">Voluptatum</button></span>
    </div>
    <div id="accordion-ab1-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-ab1" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Sint qui cumque sint assumenda culpa aut magnam. qui ea fuga tempora maiores. quo nisi et sit quidem. explicabo quaerat a esse sequi voluptatem. sequi qui itaque ut eligendi ut dolorem asperiores

Vel dignissimos suscipit debitis id aperiam libero non cum laudantium in quae totam. ad delectus animi nemo autem nesciunt itaque temporibus voluptatem eaque ad commodi labore est repellendus. quia rem est quasi vel. magni qui expedita omnis eius</p>
      </div>
    </div>
  </li>
  <li class="accordion__child">
    <div id="accordion-ab2" data-accordion-trigger class="accordion__toggle accordion__toggle--buttons accordion__toggle--buttons-right" tabindex="0" role="button" data-aria-expanded="false" aria-controls="accordion-ab2-panel"><h2 class="accordion__label">Voluptas ea occaecati aut iste voluptatibus sit repellat corrupti est doloremque voluptas quasi</h2><span class="accordion__buttons"><button href="#" class="button button--small" role="button">Dolorum</button><button href="#" class="button button--small button--primary" role="button">Voluptatum dolorum</button></span></div>
    <div id="accordion-ab2-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-ab2" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Libero praesentium voluptas est aut. et quasi dolores illum totam assumenda officia enim est repellendus voluptas voluptate vitae facere quo. cumque aut accusamus quam. tempore delectus commodi et et eos enim libero temporibus eaque et omnis at facilis explicabo. id alias voluptate sunt iste et. excepturi ratione aliquam explicabo aspernatur accusamus asperiores quasi alias provident. asperiores cupiditate nostrum corrupti et eum maxime iusto ut labore</p>
      </div>
    </div>
  </li>
  <li class="accordion__child">
    <div id="accordion-ab3" data-accordion-trigger class="accordion__toggle accordion__toggle--buttons accordion__toggle--buttons-right" tabindex="0" role="button" aria-expanded="false" aria-controls="accordion-ab3-panel"><h2 class="accordion__label">Quia deleniti nostrum maxime atque dolor quod quis autem</h2><span class="accordion__buttons"><button href="#" class="button button--small" role="button">Voluptatum</button></span></div>
    <div id="accordion-ab3-panel" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="accordion-ab3" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Aperiam voluptatem qui minus et exercitationem et consequatur in ut ab. voluptatibus quos at doloribus unde cumque pariatur qui vel eaque cum doloremque qui. at eos quis eligendi cumque. vel excepturi voluptatibus est molestias. fugit commodi est autem consectetur quos consequatur sapiente aut. enim vel nam ad dolorem hic eos error et veritatis tempora ut. consequatur molestias debitis molestiae quam consequatur necessitatibus a saepe libero omnis sit sunt et et

Est minus quae aperiam sint eos. eaque voluptate qui exercitationem labore recusandae est libero atque deserunt modi voluptatibus nemo assumenda. magnam libero eos et quam ut neque

Autem molestiae eius et voluptatibus. numquam ea animi occaecati nesciunt dolores non provident voluptatem enim vel qui suscipit voluptas. exercitationem non eligendi hic suscipit quasi omnis quo dolore asperiores est neque velit</p>
      </div>
    </div>
  </li>    
</ul>
<!-- END widgets/acccordion component -->

Complex with checkbox

3.x markup

3.x markup


<!-- START widgets/acccordion component -->
<ul class="accordion accordion--complex accordion--clear" data-accordion-controls="true">
  <li class="accordion__child accordion__child--postgraduate">
    <div id="idc3cd62152c" data-accordion-trigger class="accordion__toggle accordion__toggle--with-checkbox" tabindex="0" role="button" aria-expanded="false" aria-controls="id24bab25cab">

      <h2 class="accordion__label">Dolor nulla quos assumenda impedit temporibus et omnis consequatur quisquam voluptatibus quibusdam <abbr class="badge--no-of-options" title="1 course option">1</abbr></h2>
      <input type="checkbox" class="accordion__checkbox" name="checkbox_button" id="id8a611a6404" value="checkbox_1" aria-label="Select row" onclick="event.stopPropagation();">
      <div class="accordion__badges">
        <span class="badge">Postgraduate</span>
        <span class="badge"></span>
        <span class="badge badge--courseid">OU812</span>
        <span class="accordion__buttons"><button href="#" class="button button--small button--warning" role="button" onclick="event.stopPropagation();">View</button></span>
      </div>

    </div>
    <div id="id24bab25cab" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="idc3cd62152c" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Vel sit quasi deserunt voluptatem sit modi quaerat ut facere porro. natus temporibus esse ad. et ipsum eius aut eum ullam nam adipisci neque exercitationem ullam voluptatem

Magni modi reiciendis minus laboriosam enim dolores dolor neque suscipit aut consequatur. consequatur velit nisi unde ut aut ratione consequatur aut ducimus exercitationem. eos eaque ullam et

Earum laudantium qui molestiae non sed eos id neque. harum est a suscipit nisi aut repellat id perspiciatis pariatur. rem non beatae veniam quasi eaque qui harum in qui non porro aliquid. dolores rerum vero quidem hic non. qui sit placeat et et repellat. aut perferendis blanditiis distinctio laudantium sed illo eos. tempore et pariatur molestiae dolores porro voluptatem sint</p>
      </div>
    </div>
  </li>
  <li class="accordion__child accordion__child--undergraduate">
    <div id="idc1301da8fa" data-accordion-trigger class="accordion__toggle accordion__toggle--with-checkbox" tabindex="0" role="button" aria-expanded="false" aria-controls="idd80b0994ef">
      <h2 class="accordion__label">Eos omnis voluptatem est est ut tempore beatae itaque necessitatibus laudantium esse incidunt quisquam eos <abbr class="badge--no-of-options" title="4 course options">4</abbr></h2>
      <input type="checkbox" class="accordion__checkbox" name="checkbox_button" id="ide064c041c6" value="checkbox_1" aria-label="Select row" onclick="event.stopPropagation();">
      <div class="accordion__badges">
        <span class="badge">Undergraduate</span>
        <span class="badge"></span>
        <span class="badge badge--courseid">OU812</span>
        <span class="accordion__buttons"><button href="#" class="button button--small" role="button" onclick="event.stopPropagation();">View</button></span>
      </div>
    </div>
    <div id="idd80b0994ef" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="idc1301da8fa" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Saepe culpa enim dolor ratione eius optio quia in omnis. nulla libero qui illo. exercitationem voluptates natus iusto assumenda autem quos. est cum facere architecto. perferendis esse possimus quas</p>
      </div>
    </div>
  </li>
  <li class="accordion__child accordion__child--undergraduate">
    <div id="id274f8d0079" data-accordion-trigger class="accordion__toggle accordion__toggle--with-checkbox" tabindex="0" role="button" aria-expanded="false" aria-controls="id6efb37afc4">
      <h2 class="accordion__label">Architecto fuga ducimus dolores ut <abbr class="badge--no-of-options" title="1 course option">1</abbr></h2>
      <input type="checkbox" class="accordion__checkbox" name="checkbox_button" id="id9fc827b2e1" value="checkbox_1" aria-label="Select row" onclick="event.stopPropagation();">
      <div class="accordion__badges">
        <span class="badge">Undergraduate</span>
        <span class="badge"><span class="tag tag--small tag--archived">Archived</span></span>
        <span class="badge"></span>
        <span class="accordion__buttons">
          <button href="#" class="button button--small button--warning" role="button" onclick="event.stopPropagation();">View</button>
        </span>
      </div>
    </div>
    <div id="id6efb37afc4" class="accordion__inner" data-accordion-state="collapsed" aria-labelledby="id274f8d0079" aria-hidden="true" role="region">
      <div class="accordion__inner-wrapper">
        <p>Eum consequatur fugiat quidem autem quia sed corrupti quisquam aut omnis. eum consequatur vitae qui ea nostrum dolores consectetur. in nesciunt dolor nihil odit eius a unde mollitia qui beatae

Saepe est aut quas vero placeat enim. tenetur illo facere atque dolores voluptatem praesentium illo delectus numquam perspiciatis quia. doloribus iusto a dicta quibusdam ab nesciunt alias nulla fugit vitae. voluptas perferendis fugit dolores. unde ipsa sunt amet eos blanditiis earum eos illo. nihil totam eos nihil nostrum id unde saepe quas et quo repellendus alias qui sit. velit aut in est nemo tempora

Voluptas sequi est rerum aut illo et ut. quibusdam eum est at iste soluta modi labore eligendi voluptatem vitae eius quos. laudantium temporibus et dolore et quam veniam rerum molestiae et ut delectus debitis voluptatum unde. ut et odit iste placeat quos modi. consequatur sunt id animi asperiores fugiat veritatis id incidunt voluptatem ut hic libero. aliquam sed id harum quod ut omnis et eos in. quas ducimus et iure tempore id voluptatem et ipsa harum et</p>
      </div>
    </div>
  </li>
</ul>
<!-- END widgets/acccordion component -->