PatternLab (0.1.259)

# Show More List

TIP

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

hide 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 -labor 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 -labor 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 Labor+
            </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 -->

← Termin Box →