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><span class="icon-arrow icon--size-3"> <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span> </span></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>