Go to rebrand

Expander/Collapser

Component used to expand and close elements with smooth animations.

Functional Example 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent feugiat condimentum erat molestie rhoncus.

Code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="js-collapsed" id="hidden-text" aria-labelledby="header-1"> <p>Hidden Text</p> </div> <button class="ca-btn--link ca-a ca-a-uprcs ca-a-sm" data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text"]}' id="header-1" aria-expanded="false" aria-controls="hidden-text"> View more </button>

Functional Example 2 - Bind button

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent feugiat condimentum erat molestie rhoncus.

Code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="js-collapsed" id="hidden-text2" aria-labelledby="header-2"> <p>Hidden Text</p> </div> <p> <button class="ca-btn--link ca-a ca-a-uprcs ca-a-sm bind-button" data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text2"], "bindButton": ".bind-button2"}' id="header-2" aria-expanded="false" aria-controls="hidden-text2"> View more </button> </p> <p> <button class="ca-btn--link ca-a ca-a-uprcs ca-a-sm bind-button2" data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text2"], "bindButton": ".bind-button"}' id="header-2" aria-expanded="false" aria-controls="hidden-text2"> View more </button> </p>

Functional Example 3 - Does not change button text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent feugiat condimentum erat molestie rhoncus.

Code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="js-collapsed" id="hidden-text3" aria-labelledby="header-3"> <p>Hidden Text</p> </div> <button class="ca-btn--link ca-a ca-a-uprcs ca-a-sm" data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text3"], "keepText": true}' id="header-3" aria-expanded="false" aria-controls="hidden-text3"> View more <strong>here</strong> </button>

Functional Example 4 - Expanding multiple elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hidden Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent feugiat condimentum erat molestie rhoncus.

Code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="js-collapsed" id="hidden-text4" aria-labelledby="header-4"> <p>Hidden Text</p> </div> <p> <button class="ca-btn--link ca-a ca-a-uprcs ca-a-sm" data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text4", "#hidden-text5", "#fake-element"]}' id="header-4" aria-expanded="false" aria-controls="hidden-text4"> View more </button> </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="js-collapsed" id="hidden-text5" aria-labelledby="header-4"> <p>Hidden Text</p> </div>

How to use

Implementation

1. Make sure to include the JS via Lazy Load and CSS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_expander_collapser.css') }}" /> <script type="text/javascript" class="lazy-load" data-src="{{ static("js/ca_styleguide_expander_collapser.js") }}"></script>

2. Add the class js-collapsed and attribute some class or id to the element that wraps the content that will be expanded/collapsed. Remember to add the aria-labelledby, which is the id from the element expanding it.

<div class="js-collapsed" id="hidden-text" aria-labelledby="header-1"> <p>Hidden text.</p> </div>

3. Add the attribute data-expand-collapse with the options to the element that will trigger the expand/collapse action. Remember to add the id, aria-expanded and aria-controls for accessibility.

If the element should be expanded as default, you can add the js-expanded class to the container, and add the data-expand-collapse-action="collapse" attribute to the trigger.

<button data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text"]}' id="header-1" aria-expanded="false" aria-controls="hidden-text"> View more </button>

Options

It's possible add some custom properties to the expander/collapser component:

{ "expandText":"View more", //text button when content is collapsed "collapseText": "View less", //text button when content is expanded "target": ["#hidden-text"] //array of elements that will be expanded/collapsed "bindButton": ".bind-button" //optional attribute, 2 triggers to expand/collapse same element "keepText": false //optional attribute, does not change the button text }

Expander Collapser Tracker

You can set the name of UserDB expander collapser tracker through data-uapi-content-toggle="your_custom_name" or leave empty to be 'content toggle'

The payload that wil be sent:

payload = { category: 'page interaction', name: 'content toggle', data: { element: ['your_custom_name' | 'content toggle'], action: ['expand', collapse] }, };

Context

You can set a context of UserDB expander collapser tracker through data-expand-collapse-uapi-context='{"key": "value"}'

The payload that wil be sent:

payload = { category: 'page interaction', name: 'content toggle', data: { element: 'content toggle', action: ['expand', collapse], context: { key: "value" } }, };

You can check the sent data in the following example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent feugiat condimentum erat molestie rhoncus.