Show More List

INFO

The show more list is a list that can be collapsed and expanded. It is used to show a limited number of items at first and then expand the list to show all items.

• 21 Kompetenz-Foren mit Fachexperten, die Ihre Fragen zuverlässig beantworten
• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolorum maiores perspiciatis sunt? Ab adipisci consequuntur cupiditate ex fugit illo labore maiores possimus ut vel. Ab adipisci dolorem eum perferendis?
• Medikationsmanagement mit MediCheck: Für AMTS-Vorreiter, Chancen-Denker und Apotheker mit Profil
• Rechtskonforme Dokumentation aller Prozesse in Rezeptur, Defektur und Labor mit unserer Laborsoftware LabXpert

Usage

The collapse link (c-link) has the attributes data-toggle="collapse", data-target='#listID" and data-alttext="show less" (for the alternative text that is shown after collapsing).

• The link has a child .c-link__text where the alternative text is being inserted.
• The list itself has the referenced ID and the attributes aria-expanded="false" and data-visible-items="2" (how many items should be visible at first, 4 is default value).
• Optional: list items that should be hidden at first can have the class -is-hidden

Show Code

<!-- start collapsible list -->
<ul class="c-list -linklist js-show-more" id="services" data-visible-items="2" aria-expanded="false">
  <li class="c-list__item">
    <a class="c-link c-list__item__content p-y-reset -icon-hover-arrow" href="/forum/eingang/">
      <div class="p-x-xxl m-x-auto h-flex h-flex-row h-vertical-center">
        <span class="c-icon -forum m-r-m -icon-right -icon-arrow" ></span>
        <span class="c-link c-list__item__content -regular -large">
          21 Kompetenz-Foren mit Fachexperten, die Ihre Fragen zuverlässig beantworten
        </span>
      </div>
    </a>
  </li>
  <li class="c-list__item">
    <a class="c-link c-list__item__content p-y-reset -icon-hover-arrow" href="">
      <div class="p-x-xxl m-x-auto h-flex h-flex-row h-vertical-center">
        <span class="c-icon -labxpert m-r-m -icon-right -icon-arrow" ></span>
        <span class="c-link c-list__item__content -regular -large">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolorum maiores perspiciatis sunt? Ab adipisci consequuntur cupiditate ex fugit illo labore maiores possimus ut vel. Ab adipisci dolorem eum perferendis?
        </span>
      </div>
    </a>
  </li>
  <li class="c-list__item">
    <a class="c-link c-list__item__content p-y-reset -icon-hover-arrow" href="/medicheck/">
      <div class="p-x-xxl m-x-auto h-flex h-flex-row h-vertical-center">
        <span class="c-icon -medicheck m-r-m -icon-right -icon-arrow" ></span>
        <span class="c-link c-list__item__content -regular -large">
          Medikationsmanagement mit MediCheck:
          Für AMTS-Vorreiter, Chancen-Denker und Apotheker mit Profil
        </span>
      </div>
    </a>
  </li>
  <li class="c-list__item">
    <a class="c-link c-list__item__content p-y-reset -icon-hover-arrow" href="/labor-plus/intro/">
      <div class="p-x-xxl m-x-auto h-flex h-flex-row h-vertical-center">
        <span class="c-icon -labxpert m-r-m -icon-right -icon-arrow" ></span>
        <span class="c-link c-list__item__content -regular -large">
          Rechtskonforme Dokumentation aller Prozesse in Rezeptur, Defektur und Labor mit unserer Laborsoftware LabXpert
        </span>
      </div>
    </a>
  </li>
  <!-- start "show more" -link -->
  <li class="p-y-m">
    <div class="p-x-xxl m-x-auto h-flex h-start">
      <a class="c-link c-list__item__content -secondary -large -icon-right -show-more" data-toggle="collapse" data-target="#services" data-alttext="... weniger anzeigen">
        <span class="c-link__text">... und vieles mehr</span>
        <span class="fas fa-chevron-down" ></span>
      </a>
    </div>
  </li>
  <!-- end "show more" -link -->
</ul>
<!-- / end collapsible list -->