List toggle

  • Default
  • With toggle
Show code
<div class="whiteContainer current -noBackground mt-3"> <div class="whiteContainer__title text-on-bg wrap"> <span class="pt-1 pb-1">Documents reçus <span class="badge -theme-2 ml-1">3</span> </span> <span class="ml-auto flex grid--align--center g-0-5"></span> </div> <div class="whiteContainer__container" data-content-card-toggle="default"> <div id="results"> <div class="cardToggle"> <div class="cardToggle__header cursor-pointer"> <div class="header__title" data-trigger=""> <a class="card-detail"> <div class="card-detail__content"> Item 1 <span class="font-normal">image.jpeg</span> </div> <div class="card-detail__right"> </div> </a> </div> <div class="header__buttons"> <button type="button" data-trigger="" class=""> <span class="icon-arrow -border"><x class="path1"></x><x class="path2"></x><x class="path3"></x></span> </button> </div> </div> <div class="cardToggle__content pb-0 "> </div> </div> <div class="cardToggle"> <div class="cardToggle__header cursor-pointer"> <div class="header__title" data-trigger=""> <a class="card-detail"> <div class="card-detail__content"> Item 2 <span class="font-normal">image1.jpeg</span> </div> <div class="card-detail__right"> </div> </a> </div> <div class="header__buttons"> <button type="button" data-trigger="" class=""> <span class="icon-arrow -border"><x class="path1"></x><x class="path2"></x><x class="path3"></x></span> </button> </div> </div> <div class="cardToggle__content pb-0 "> </div> </div> <div class="cardToggle"> <div class="cardToggle__header cursor-pointer"> <div class="header__title" data-trigger=""> <a class="card-detail"> <div class="card-detail__content"> Item 3 <span class="font-normal">file.pdf</span> </div> <div class="card-detail__right"> </div> </a> </div> <div class="header__buttons"> <button type="button" data-trigger="" class=""> <span class="icon-arrow -border"><x class="path1"></x><x class="path2"></x><x class="path3"></x></span> </button> </div> </div> <div class="cardToggle__content pb-0 "> </div> </div> </div> </div> </div>
<div class="whiteContainer current -noBackground mt-3 -active" data-trigger-content="listToggle"> <div class="whiteContainer__title text-on-bg wrap"> <span class="pt-1 pb-1">Documents reçus <span class="badge -theme-2 ml-1">3</span> </span> <span class="ml-auto flex grid--align--center g-0-5"></span> <button data-trigger>@@include('/Users/slelorrain/Documents/kidola-devkit/src/includes/devkit/foundation/icon.html', {"name": "arrow", "class": "icon--size-3"})</button> </div> <div class="whiteContainer__container" data-content-card-toggle="default"> <div id="results1"> <div class="cardToggle"> <div class="cardToggle__header cursor-pointer"> <div class="header__title" data-trigger=""> <a class="card-detail"> <div class="card-detail__content"> Item 1 <span class="font-normal">image.jpeg</span> </div> <div class="card-detail__right"> </div> </a> </div> <div class="header__buttons"> <button type="button" data-trigger="" class=""> <span class="icon-arrow -border"><x class="path1"></x><x class="path2"></x><x class="path3"></x></span> </button> </div> </div> <div class="cardToggle__content pb-0 "> </div> </div> <div class="cardToggle"> <div class="cardToggle__header cursor-pointer"> <div class="header__title" data-trigger=""> <a class="card-detail"> <div class="card-detail__content"> Item 2 <span class="font-normal">image1.jpeg</span> </div> <div class="card-detail__right"> </div> </a> </div> <div class="header__buttons"> <button type="button" data-trigger="" class=""> <span class="icon-arrow -border"><x class="path1"></x><x class="path2"></x><x class="path3"></x></span> </button> </div> </div> <div class="cardToggle__content pb-0 "> </div> </div> <div class="cardToggle"> <div class="cardToggle__header cursor-pointer"> <div class="header__title" data-trigger=""> <a class="card-detail"> <div class="card-detail__content"> Item 3 <span class="font-normal">file.pdf</span> </div> <div class="card-detail__right"> </div> </a> </div> <div class="header__buttons"> <button type="button" data-trigger="" class=""> <span class="icon-arrow -border"><x class="path1"></x><x class="path2"></x><x class="path3"></x></span> </button> </div> </div> <div class="cardToggle__content pb-0 "> </div> </div> </div> </div> </div>