Collapse
The Bootstrap collapse component, implemented in Ruby. Use it like any other matestack component in your apps, pages and components. It offers customizable options to simply achieve what is possible in bootstrap with this component. See below for more information about the possible options.

bs_collapse(*args, &block)

Returns a bootstrap collapse containing text or content specified by a block. Also the collapse is customizable with the following options.
Optional options
  • card - can be 2 types of option depends on the argument it has been given. you can pass on a String or a hash with custom class and text
  • multi - If set true, collapse element can show and hide by multiple sources
  • parent - Set data attribute data-bs-parent
  • labeledby- Set attribute aria-labelledby
  • Javascript Triggers:
    • toggle_on - Expects an event as string on which the collapse will be showed or hidden
    • :show_on - Expects an event as string on which the collapse will be showed calling javascript show method.
    • :hide_on - Expects an event as string on which the collapse will be hidden calling javascript hide method.
    • :dispose_on - Expects an event as string on which the collapse will be disposed calling javascript dispose method.
  • Html attributes - all w3c confirm html attributes for div's can be set via options and will be added to the surrounding collapse div.

Examples

Example 1: Basic Collapse component triggered by Matestack Events

1
onclick emit: "toggleCollapse" do
2
bs_btn "Toggle Collapse"
3
end
4
bs_collapse toggle_on: "toggleCollapse", card: "Random text for card body content"
Copied!
returns
1
<!-- onclick component -->
2
3
<div class="collapse">
4
<div class="card card-body">
5
Random text for card body content
6
</div>
7
</div>
Copied!

Example 2: Basic Collapse component triggered via data attributes

1
bs_btn "Toggle both element", data: { "bs-toggle": "collapse", "bs-target": "#example" }, 'aria-expanded': "false", 'aria-controls': "example"
2
bs_collapse id: "example", card: "Random text for card body content"
Copied!
returns
1
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#example" aria-expanded="false" aria-controls="example">Toggle both elements</button>
2
3
<div class="collapse">
4
<div class="card card-body">
5
Random text for card body content
6
</div>
7
</div>
Copied!

Example 3: Multiple Targets

1
paragraph do
2
a "Toggle first element", class: "btn btn-primary", path: "#multiCollapseExample1", data: { "bs-toggle": "collapse" }, 'aria-expanded': "false", 'aria-controls': "multiCollapseExample1", 'role': "button"
3
bs_btn "Toggle second element", data: { "bs-toggle": "collapse", "bs-target": "#multiCollapseExample2" }, 'aria-expanded': "false", 'aria-controls': "multiCollapseExample2"
4
bs_btn "Toggle both element", data: { "bs-toggle": "collapse", "bs-target": ".multi-collapse" }, 'aria-expanded': "false", 'aria-controls': "multiCollapseExample1 multiCollapseExample2"
5
end
6
7
bs_row do
8
bs_col do
9
bs_collapse id: "multiCollapseExample1", card: "Random text for card body content #1", multi: true
10
end
11
bs_col do
12
bs_collapse id: "multiCollapseExample2", card: "Random text for card body content #2", multi: true
13
end
14
end
Copied!
1
<p>
2
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
3
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
4
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
5
</p>
6
<div class="row">
7
<div class="col">
8
<div class="collapse multi-collapse" id="multiCollapseExample1">
9
<div class="card card-body">
10
Random text for card body content #1
11
</div>
12
</div>
13
</div>
14
<div class="col">
15
<div class="collapse multi-collapse" id="multiCollapseExample2">
16
<div class="card card-body">
17
Random text for card body content #2
18
</div>
19
</div>
20
</div>
21
</div>
Copied!
Last modified 4mo ago