Show More List

A 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.

WARNING

TODO: Refactor to use the same logic as the collapsing content component, which is more flexible and can be used for any content, not just lists.

Simple Example

• List Item 1 (visible per default)
• List Item 2 (visible per default)
• List Item 3
• List Item 4
• List Item 5

Show Code

<!-- start collapsible list -->
<ul class="c-list" id="js-example-list2"
    data-visible-items="2"
    aria-expanded="false">
    <li class="c-list__item">List Item 1 (visible per default)</li>
    <li class="c-list__item">List Item 2 (visible per default)</li>
    <li class="c-list__item -is-hidden">List Item 3</li>
    <li class="c-list__item -is-hidden">List Item 4</li>
    <li class="c-list__item -is-hidden">List Item 5</li>
    <li class="">
      <button type="button" class="c-btn -small -secondary-outline -dropdown"
         data-toggle="collapse"
         data-target="#js-example-list2"
         data-alttext="Weniger anzeigen">
        <span class="c-link__text">Mehr anzeigen</span>
      </button>
    </li>
</ul>

<!-- / end collapsible list -->

More Complex Example

Used on the pharma4u Home Page.

• 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

Show Code

<!-- start collapsible list -->
<ul class="c-list -linklist" id="js-example-list" 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">
      <button type="button" class="c-list__item__content c-link -large -underline -icon-right -show-more" data-toggle="collapse" data-target="#js-example-list" data-alttext="... weniger anzeigen">
        <span class="c-link__text">... und vieles mehr</span>
        <i class="far fa-angle-down" aria-hidden="true"></i>
      </button>
    </div>
  </li>
  <!-- end "show more" -link -->
</ul>
<!-- / end collapsible list -->

Implementation Details

The collapse trigger (typically a button or link) requires specific data attributes to manage the toggle state and dynamic text updates:

• data-toggle="collapse": Initializes the collapse behavior.
• data-target="#listID": Targets the specific list via its ID.
• data-alttext="show less": Defines the label to be displayed when the list is expanded.
• Text Wrapper: The trigger must contain a child element with the class .c-link__text (TODO use more generic selector for this), which serves as the injection point for the alternative text.

List Configuration

The target list must match the trigger's data-target and include the following attributes:

Attribute	Example Value	Description
id	"listID"	Unique identifier matching the trigger's target.
aria-expanded	"false"	Sets the initial accessibility state (collapsed).
data-visible-items	2	Defines the initial number of visible items (default is 4).

Item Visibility

By default, the script calculates visibility based on data-visible-items. However, you can manually flag specific list items to be hidden on load by applying the .-is-hidden modifier class.

---

Markup Example

<button 
  data-toggle="collapse" 
  data-target="#js-example-list" 
  data-alttext="Show less"
>
  <span class="c-link__text">Show more</span>
</button>

<ul id="js-example-list" aria-expanded="false" data-visible-items="2">
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="-is-hidden">Item 3 (Hidden)</li>
  <li class="-is-hidden">Item 4 (Hidden)</li>
</ul>