Back to blue

Content Base Toggle

This component was made to accomplish the necessity of having a paracloud on the main site where we can receive a text from the admin and we don't know in advance how many lines it will have.

For the main site use case we want to define how many lines it should have according to the design and we do that through the class .cnt-bs-tg where we defined the max-height. Altough, this script is generic and can be used for any other toggle content feature, like images, video, and texts.

Implementation

This implementation uses the Expander/Collapser to toggle the content, the only responsability of the script is to define when this should happen according to max-height of the container.

Make sure to include the content base toggle and the expander collapser CSS's into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_expander_collapser.css') }}" /> <link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_content_base_toggle.css') }}" />

Also include the content base toggle and the expander collapser scripts:

<script type="text/javascript" class="lazy-load" data-src="{{ static("js/ca_styleguide_expander_collapser.js") }}"></script> <script type="text/javascript" class="lazy-load" data-src="{{ static("js/ca_sg_content_base_toggle.js") }}"></script>

How to use it

Basic example

Add a container to the page with the classes: js-collapsed js-content-base-toggle cnt-bs-tg And define a custom class with a max-height for the container, just remember to overwrite the js-collapsed class.

For the example, let's use this .cnt-bs-tg--custom class:

.cnt-bs-tg { &--custom { &.js-collapsed { max-height: 200px; } } }
this is a black box with 400px of height but it shows only 200px
<div class="js-content-base-toggle"> <div id="ctn-bs-tg-hidden" class="js-collapsed cnt-bs-tg cnt-bs-tg--custom"> <div> CONTENT </div> <span class="js-content-base-toggle-end"></span> </div> <button class="js-content-base-toggle-btn ca-hide" data-expand-collapse='{"expandText":"Expand", "collapseText": "Collapse", "target": ["#ctn-bs-tg-hidden]}"> Expand </button> </div>

Paracloud example

This represents a real paracloud use case where we want to have only 3 lines on mobile and 5 on desktop, if there is more a show more button will show up.

Use the cnt-bs-tg--cp and ca-cp classes for it.



<div class="js-content-base-toggle"> <div id="ctn-bs-tg-hidden" class="js-collapsed cnt-bs-tg cnt-bs-tg--pc ca-pc"> <div> CONTENT </div> <span class="js-content-base-toggle-end"></span> </div> <button class="js-content-base-toggle-btn ca-hide" data-expand-collapse='{"expandText":"Expand", "collapseText": "Collapse", "target": ["#ctn-bs-tg-hidden]}"> Expand </button> </div>