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"> <p>Hidden text.</p> </div> <button data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#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"> <p>Hidden text.</p> </div> <button data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text2"], "bindButton": ".bind-button2"}' class="ca-btn--link ca-a ca-a-uprcs ca-a-sm bind-button"> View more </button> <button data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text2"], "bindButton": ".bind-button"}' class="ca-btn--link ca-a ca-a-uprcs ca-a-sm bind-button2"> View more </button>

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"> <p>Hidden text.</p> </div> <button data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text3"], "keepText": true}'> View more </button>

Functional Example 4 - Expanding multiple elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Praesent feugiat condimentum erat molestie rhoncus.

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"> <p>Hidden text.</p> </div> <button data-expand-collapse='{"expandText":"View more", "collapseText": "View less", "target": ["#hidden-text4", "#hidden-text5"]}'> View more </button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="js-collapsed" id="hidden-text5"> <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.

<div class="js-collapsed" id="hidden-text"> <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.

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"]}'> 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-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.