Tag group: Avec une liste semi-masquée

Choix de l'univers FT

Tag group Liste d'étiquettes

Elle regroupe des tags ensemble et permet par exemple d’afficher une liste de critères appliqués.

Documentation : Figma

Langage:  HTML 

<div class="ds-tag-group">
    <ul class="ds-tag-group-items">
        <li>
            <span class="tag tag-blue"><span class="tag-content">Lorem ipsum 1</span>
            </span>
        </li>
        <li>
            <span class="tag tag-blue"><span class="tag-content">Lorem ipsum 2</span>
            </span>
        </li>
        <li>
            <span class="tag tag-blue"><span class="tag-content">Lorem ipsum 3</span>
            </span>
        </li>
        <li>
            <span class="tag tag-blue"><span class="tag-content">Lorem ipsum 4</span>
            </span>
        </li>
        <li hidden>
            <span class="tag tag-blue"><span class="tag-content">Lorem ipsum 5</span>
            </span>
        </li>
        <li hidden>
            <span class="tag tag-blue"><span class="tag-content">Lorem ipsum 6</span>
            </span>
        </li>

    </ul>

    <button class="btn btn-tertiary light btn-sm" id="button_600182326" type="button" data-ft-tooltip="Afficher les 2 tags supplémentaires">
        <span class="btn-content">+2</span>
    </button>
</div>
  • URL Preview : /js/tag-group.js
  • Chemin d'accès : public/js/tag-group.js
  • Taille : 604 Bytes
  • Contenu : 
    window.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll(".ds-tag-group .btn-sm").forEach((moreTagButton) => {
        moreTagButton.addEventListener("click", () => {
            moreTagButton.toggleAttribute("hidden");

            const moreTags = moreTagButton.closest(".ds-tag-group").querySelectorAll("li[hidden]");

            moreTags.forEach((tag) => {
                tag.toggleAttribute("hidden");
            })

            if (moreTags[0]) {
                moreTags[0].tabIndex = -1;
                moreTags[0].focus();
            }
        })
    });
});