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.
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.
Razor
Open in new tabHandlebars
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.
Razor
Open in new tabThe 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".
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.
Razor
Open in new tabLorem 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.
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.
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.
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
Hotel 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..
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
You can optionally define a group id for several c-collapse components in order to close all when one in the group is opened.
- 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..
- Kreta
- Cheronissos
- Rodos
Collapse triggers
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.
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!
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!