sunweb

Collapse

components box

Definition


The collapse component has the responsibility to hide and show partial content based on its total height. It's commonly used to reduce the length of the page delivering some content collapsed by default, or truncate long content in a smaller cropped overview.

c-collapse

Handlebars

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Loading...

c-collapse with Aria Label

Handlebars

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Loading...

The collapseFrom property defines a breakpoint where the collapse starts being a collapse, and makes the body content being collapsible. Otherwhise the body content is visible where it is placed. The current available breakpoints are "sm", "sml" and "md".

c-collapse collapseFrom

Handlebars

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Loading...

c-collapse [collapse-height=90px][blockText=true]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.


c-collapse [after-fading][blockText=true]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.


c-collapse [after-fading-light][blockText=true]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.


c-collapse [max-items=3]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

Second item

Third item

Fourth item, this should not be visible

Fifth item


c-collapse nested
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, blanditiis deserunt dolorum eveniet expedita impedit molestiae neque, officiis quas quia saepe, sunt tempore temporibus ullam! Corporis culpa iste sequi..

    Nested Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt dolor et eum itaque labore provident quod repudiandae rerum sed! Ipsa laudantium minus mollitia possimus voluptatibus? Alias corporis error totam.

    Nested Second item

    Nested Third item

    Nested Fourth item, this should not be visible

    Nested Fifth item


c-collapse group

You can optionally define a group id for several c-collapse components in order to close all when one in the group is opened.

Spain
  • Costa Brava

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, blanditiis deserunt dolorum eveniet expedita impedit molestiae neque, officiis quas quia saepe, sunt tempore temporibus ullam! Corporis culpa iste sequi..

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, blanditiis deserunt dolorum eveniet expedita impedit molestiae neque, officiis quas quia saepe, sunt tempore temporibus ullam! Corporis culpa iste sequi..

  • Costa Dorada

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, blanditiis deserunt dolorum eveniet expedita impedit molestiae neque, officiis quas quia saepe, sunt tempore temporibus ullam! Corporis culpa iste sequi..

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, blanditiis deserunt dolorum eveniet expedita impedit molestiae neque, officiis quas quia saepe, sunt tempore temporibus ullam! Corporis culpa iste sequi..

Greece
  • Kreta
  • Cheronissos
  • Rodos

Collapse triggers


c-collapse__trigger

The collapse triggers are tiny elements with open, close and toggling capabilities. They have a default discrete look-like. The open and close ones, toggle their visibility according the collapse opened state.


c-collapse__trigger smooth

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, blanditiis deserunt dolorum eveniet expedita impedit molestiae neque, officiis quas quia saepe, sunt tempore temporibus ullam! Corporis culpa iste sequi..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ea ipsa laboriosam magnam minus, molestias officia quibusdam reiciendis tenetur vel? Adipisci aliquam dolor, dolorum ducimus exercitationem incidunt quam quos recusandae!


c-collapse__trigger arrow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet, blanditiis deserunt dolorum eveniet expedita impedit molestiae neque, officiis quas quia saepe, sunt tempore temporibus ullam! Corporis culpa iste sequi..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ea ipsa laboriosam magnam minus, molestias officia quibusdam reiciendis tenetur vel? Adipisci aliquam dolor, dolorum ducimus exercitationem incidunt quam quos recusandae!