Show More

Open in Figma View all renders

Show More

show-more components link their header and panel child elements through the aria-controls attributes on the relevant child elements. While the `hidden` attribute exists on the `.show-more-content` div, That div will remain out of sight. 

<details id="show-more-example" class="show-more">
    <summary>
        <span class="underline" data-open="Show More" data-closed="Show Less"></span>
        <span class="material-symbols-rounded" aria-hidden="true">
            stat_minus_1
        </span>
    </summary>
    Lorem ipsum odor amet, consectetuer adipiscing elit. Ad mus tincidunt nec senectus facilisis. Placerat ut aliquam convallis euismod et finibus sit. Natoque morbi non vehicula himenaeos mauris integer vitae sociosqu. Ultricies luctus nibh himenaeos sociosqu; ex neque integer. Enim suspendisse bibendum nunc arcu, auctor vitae urna habitasse congue. Ain quam magnis inceptos aenean. Ut morbi vestibulum venenatis augue scelerisque per tortor urna porttitor. Semper bibendum natoque tincidunt in ex hac.
</details>

Show More Help

This variation uses different CSS tokens and includes the Help text. 

<details id="show-more-example" class="show-more show-more--help">
    <summary>
        <span class="underline" data-open="Show Help" data-closed="Hide Help"></span>
        <span class="material-symbols-rounded" aria-hidden="true">
            stat_minus_1
        </span>
    </summary>
    Lorem ipsum odor amet, consectetuer adipiscing elit. Ad mus tincidunt nec senectus facilisis. Placerat ut aliquam convallis euismod et finibus sit. Natoque morbi non vehicula himenaeos mauris integer vitae sociosqu. Ultricies luctus nibh himenaeos sociosqu; ex neque integer. Enim suspendisse bibendum nunc arcu, auctor vitae urna habitasse congue. Ain quam magnis inceptos aenean. Ut morbi vestibulum venenatis augue scelerisque per tortor urna porttitor. Semper bibendum natoque tincidunt in ex hac.
</details>