Skip to main content

Content toggle

Content toggle is a component that enables users to expose additional content in context below existing content, or alternatively, to expose less content. The interactive contextual link changes from one string, (ex. "More"), to another, (ex. "Less"), to toggle between functions.

Example

HoloLens has see-through holographic lenses that use an advanced optical projection system to generate multi-dimensional full-color holograms with very low latency so you can see holographic objects in your world. The key to a great holographic experience is holograms that are light point rich, i.e. have a high holographic density, and are pinned or anchored to the world around you. To achieve this, HoloLens has been designed for optimal holographic density of 2.5K radiants. The more radiants and light points there are, the brighter and richer the holograms become. With HoloLens you can create and shape holograms with gestures, communicate with apps using your voice and navigate with a glance. HoloLens understands your gestures, gaze, and voice, enabling you to interact in the most natural way possible. With spatial sound, HoloLens synthesizes sound so you can hear holograms from anywhere in the room, even if they are behind you. In addition to the CPU/GPU, HoloLens comes with a Microsoft HPU. This custom silicon efficiently processes a large amount of data per second from the sensors. HoloLens understands gestures and where you look, and maps the world all around you, all in real time.

Content toggle on a default theme

Best practices

Use content toggle to entice the user to read more content within the same context without having to initially take up the screen real estate needed to show all of the content. Content toggle preserves the context of what they are reading and can be quicker and less jarring than linking to another page in order to read the rest of the content. For example, on a landing page which might have several topics that the user might be interested in, use content toggle to expose short paragraphs of each topic initially, so the user can get a quick idea of all topics without having to scroll.

Do

  • Use preferably one word, and at most two words for each of the expand and collapse functions. (Ex. "More" and "Less" instead of "Show more content" and "Show less content").
  • Precede the contextual link with a short paragraph that gives the user a good idea of what content will be revealed by clicking on the link. Don’t precede the contextual link with merely an article title, for example.

Don’t

  • Don't use content toggle to link to another page. Use a hyperlink instead.
  • Don’t include a period or glyph after the words used for the expand or collapse function. The words should stand on their own.
  • Don’t use a phrase or sentence.

Also known as

Accordion
Expand/collapse link
Show more

Related

Drawer

Accessibility

  • Aria hidden: Add an aria-hidden because the complete content is always available for those on screen readers.

Options

  • Default Expand/Collapse: Change data-f-expanded and aria-expanded to true to default expanded.
  • Collapsed Visible Lines: Change data-f-show to the number of lines that should be shown. (Default is 3)
  • More Text: Change data-f-more to the desired string.
  • Less Text: Change data-f-less to the desired string.

Development

  • Schema definition: The content-toggle schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Content toggle with paragraph toggled with defaults

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis. Curabitur accumsan ut ipsum quis facilisis. Nunc eleifend nibh libero, in luctus massa ullamcorper non. Fusce vitae dolor eget sapien auctor blandit. Vestibulum nisl risus, sollicitudin eu nisi sed, fringilla gravida turpis. Donec consequat aliquam rhoncus. Aenean nec ipsum in tellus mollis vestibulum. Quisque accumsan posuere turpis tempus egestas. Praesent sed ipsum non velit accumsan pretium id vel tortor. Fusce vel feugiat libero. Quisque eu est in dui facilisis faucibus. Donec tincidunt eget felis ac semper. In egestas nunc id tellus pellentesque, vel ullamcorper ex dictum. Vivamus a tempor arcu, et laoreet sem. Mauris ac aliquam dui. Curabitur bibendum, nisi sed gravida gravida, sapien nisl sollicitudin sem, sed blandit quam arcu eleifend dolor. Maecenas tristique nibh ullamcorper ante pellentesque faucibus. Cras non nulla vitae urna porttitor sagittis. Cras vitae pretium dolor. In non elit a nunc facilisis ultrices ac vitae elit. Curabitur vitae aliquet risus.

<div class="c-content-toggle">
    <p id="contentToggleDefaultParagraphId" data-f-expanded="false">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis. Curabitur accumsan ut ipsum quis facilisis. Nunc eleifend nibh libero,
        in luctus massa ullamcorper non. Fusce vitae dolor eget sapien auctor blandit. Vestibulum nisl risus, sollicitudin eu nisi sed, fringilla gravida turpis. Donec consequat aliquam rhoncus. Aenean nec ipsum in tellus mollis vestibulum. Quisque accumsan
        posuere turpis tempus egestas. Praesent sed ipsum non velit accumsan pretium id vel tortor. Fusce vel feugiat libero. Quisque eu est in dui facilisis faucibus. Donec tincidunt eget felis ac semper. In egestas nunc id tellus pellentesque, vel ullamcorper
        ex dictum. Vivamus a tempor arcu, et laoreet sem. Mauris ac aliquam dui. Curabitur bibendum, nisi sed gravida gravida, sapien nisl sollicitudin sem, sed blandit quam arcu eleifend dolor. Maecenas tristique nibh ullamcorper ante pellentesque faucibus.
        Cras non nulla vitae urna porttitor sagittis. Cras vitae pretium dolor. In non elit a nunc facilisis ultrices ac vitae elit. Curabitur vitae aliquet risus.</p>
    <button data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
</div>

Content toggle with paragraph toggled after 4 lines

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis. Curabitur accumsan ut ipsum quis facilisis. Nunc eleifend nibh libero, in luctus massa ullamcorper non. Fusce vitae dolor eget sapien auctor blandit. Vestibulum nisl risus, sollicitudin eu nisi sed, fringilla gravida turpis. Donec consequat aliquam rhoncus. Aenean nec ipsum in tellus mollis vestibulum. Quisque accumsan posuere turpis tempus egestas. Praesent sed ipsum non velit accumsan pretium id vel tortor. Fusce vel feugiat libero. Quisque eu est in dui facilisis faucibus. Donec tincidunt eget felis ac semper. In egestas nunc id tellus pellentesque, vel ullamcorper ex dictum. Vivamus a tempor arcu, et laoreet sem. Mauris ac aliquam dui. Curabitur bibendum, nisi sed gravida gravida, sapien nisl sollicitudin sem, sed blandit quam arcu eleifend dolor. Maecenas tristique nibh ullamcorper ante pellentesque faucibus. Cras non nulla vitae urna porttitor sagittis. Cras vitae pretium dolor. In non elit a nunc facilisis ultrices ac vitae elit. Curabitur vitae aliquet risus.

<div class="c-content-toggle">
    <p id="contentToggleToggledParagraphId" data-f-expanded="false">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis. Curabitur accumsan ut ipsum quis facilisis. Nunc eleifend nibh libero,
        in luctus massa ullamcorper non. Fusce vitae dolor eget sapien auctor blandit. Vestibulum nisl risus, sollicitudin eu nisi sed, fringilla gravida turpis. Donec consequat aliquam rhoncus. Aenean nec ipsum in tellus mollis vestibulum. Quisque accumsan
        posuere turpis tempus egestas. Praesent sed ipsum non velit accumsan pretium id vel tortor. Fusce vel feugiat libero. Quisque eu est in dui facilisis faucibus. Donec tincidunt eget felis ac semper. In egestas nunc id tellus pellentesque, vel ullamcorper
        ex dictum. Vivamus a tempor arcu, et laoreet sem. Mauris ac aliquam dui. Curabitur bibendum, nisi sed gravida gravida, sapien nisl sollicitudin sem, sed blandit quam arcu eleifend dolor. Maecenas tristique nibh ullamcorper ante pellentesque faucibus.
        Cras non nulla vitae urna porttitor sagittis. Cras vitae pretium dolor. In non elit a nunc facilisis ultrices ac vitae elit. Curabitur vitae aliquet risus.</p>
    <button data-f-more="More" data-f-less="Less" data-f-show="4" aria-hidden="true">More</button>
</div>

Content toggle with multiple items inside

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis. Curabitur accumsan ut ipsum quis facilisis. Nunc eleifend nibh libero, in luctus massa ullamcorper non. Fusce vitae dolor eget sapien auctor blandit.

Vestibulum nisl risus, sollicitudin eu nisi sed, fringilla gravida turpis. Donec consequat aliquam rhoncus. Aenean nec ipsum in tellus mollis vestibulum. Quisque accumsan posuere turpis tempus egestas. Praesent sed ipsum non velit accumsan pretium id vel tortor. Fusce vel feugiat libero. Quisque eu est in dui facilisis faucibus. Donec tincidunt eget felis ac semper. In egestas nunc id tellus pellentesque, vel ullamcorper ex dictum. Vivamus a tempor arcu, et laoreet sem. Mauris ac aliquam dui. Curabitur bibendum, nisi sed gravida gravida, sapien nisl sollicitudin sem, sed blandit quam arcu eleifend dolor. Maecenas tristique nibh ullamcorper ante pellentesque faucibus. Cras non nulla vitae urna porttitor sagittis. Cras vitae pretium dolor. In non elit a nunc facilisis ultrices ac vitae elit. Curabitur vitae aliquet risus.

<div class="c-content-toggle">
    <div id="contentToggleMultipleParagraphId" data-f-expanded="false">
        <p class="c-paragraph-3">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut commodo ante. Integer mattis a ligula quis ullamcorper. Nam placerat quam sed nulla tristique mattis. Curabitur accumsan ut ipsum quis facilisis. Nunc eleifend nibh libero,
            in luctus massa ullamcorper non. Fusce vitae dolor eget sapien auctor blandit.</p>
        <p class="c-paragraph-3">Vestibulum nisl risus, sollicitudin eu nisi sed, fringilla gravida turpis. Donec consequat aliquam rhoncus. Aenean nec ipsum in tellus mollis vestibulum. Quisque accumsan posuere turpis tempus egestas. Praesent sed ipsum non velit accumsan pretium
            id vel tortor. Fusce vel feugiat libero. Quisque eu est in dui facilisis faucibus. Donec tincidunt eget felis ac semper. In egestas nunc id tellus pellentesque, vel ullamcorper ex dictum. Vivamus a tempor arcu, et laoreet sem. Mauris ac aliquam
            dui. Curabitur bibendum, nisi sed gravida gravida, sapien nisl sollicitudin sem, sed blandit quam arcu eleifend dolor. Maecenas tristique nibh ullamcorper ante pellentesque faucibus. Cras non nulla vitae urna porttitor sagittis. Cras vitae
            pretium dolor. In non elit a nunc facilisis ultrices ac vitae elit. Curabitur vitae aliquet risus.</p>
    </div>
    <button data-f-more="More" data-f-less="Less" data-f-show="4" aria-hidden="true">More</button>
</div>

Content toggle with unordered list toggled after 7 lines

  • Line item lorem ipsum dolor sit amet
  • Line item lorem ipsum dolor sit amet
  • Line item lorem ipsum dolor sit amet
  • Line item lorem ipsum dolor sit amet
  • Line item lorem ipsum dolor sit amet
  • Line item lorem ipsum dolor sit amet
  • Line item lorem ipsum dolor sit amet
  • Line item lorem ipsum dolor sit amet
  • Line item lorem ipsum dolor sit amet
<div class="c-content-toggle">
    <ul class="c-list f-bare f-lean" id="contentToggleUnorderedListId" data-f-expanded="false">
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
    </ul>
    <button data-f-more="More" data-f-less="Less" data-f-show="7" aria-hidden="true">More</button>
</div>

Content toggle with ordered list toggled after 4 lines

  1. Line item lorem ipsum dolor sit amet
  2. Line item lorem ipsum dolor sit amet
  3. Line item lorem ipsum dolor sit amet
  4. Line item lorem ipsum dolor sit amet
  5. Line item lorem ipsum dolor sit amet
  6. Line item lorem ipsum dolor sit amet
  7. Line item lorem ipsum dolor sit amet
  8. Line item lorem ipsum dolor sit amet
  9. Line item lorem ipsum dolor sit amet
<div class="c-content-toggle">
    <ol class="c-list f-bare f-lean" id="contentToggleOrderedListId" data-f-expanded="false">
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
        <li>Line item lorem ipsum dolor sit amet</li>
    </ol>
    <button data-f-more="More" data-f-less="Less" data-f-show="4" aria-hidden="true">More</button>
</div>