Collapse

We are using Bootstrap collapse to toggle the visibility of content with a link. This is useful to group information by context or to only show a subset of information whenever the complete set is simply too large.

Example

Collapsed by default

element1 element2 element3 See less elements See more elements

element4 element5 element6

Expanded by default

element1 element2 element3 See less elements See more elements

element4 element5 element6

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
%h5 Collapsed by default

%a
  %span.badge element1
%a
  %span.badge element2
%a
  %span.badge element3
%a.collapsed{ aria: { controls: "collapse-1", expanded: "false" }, "data-toggle" => "collapse", href: ".collapse-1", role: "button" }
  %span.collapser See less elements
  %span.expander See more elements
.collapse-1.collapse
  %a
    %span.badge element4
  %a
    %span.badge element5
  %a
    %span.badge element6

%h5 Expanded by default

%a
  %span.badge element1
%a
  %span.badge element2
%a
  %span.badge element3
%a{ aria: { controls: "collapse-2", expanded: "true" }, "data-toggle" => "collapse", href: ".collapse-2", role: "button" }
  %span.collapser See less elements
  %span.expander See more elements
.collapse-2.collapse.show
  %a
    %span.badge element4
  %a
    %span.badge element5
  %a
    %span.badge element6