3.1
Getting Started
API
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)
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 customclassandtextmulti- If set true, collapse element can show and hide by multiple sourcesparent- Set data attribute data-bs-parentlabeledby- 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 javascriptshowmethod.:hide_on- Expects an event as string on which the collapse will be hidden calling javascripthidemethod.:dispose_on- Expects an event as string on which the collapse will be disposed calling javascriptdisposemethod.
- 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