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

onclick emit: "toggleCollapse" do
  bs_btn "Toggle Collapse"
end
bs_collapse toggle_on: "toggleCollapse", card: "Random text for card body content"

returns

<!-- onclick component -->

<div class="collapse">
  <div class="card card-body">
    Random text for card body content
  </div>
</div>

Example 2: Basic Collapse component triggered via data attributes

bs_btn "Toggle both element", data: { "bs-toggle": "collapse",  "bs-target": "#example" }, 'aria-expanded': "false", 'aria-controls': "example"
bs_collapse id: "example", card: "Random text for card body content"

returns

<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>

<div class="collapse">
  <div class="card card-body">
    Random text for card body content
  </div>
</div>

Example 3: Multiple Targets

paragraph do
  a "Toggle first element", class: "btn btn-primary", path: "#multiCollapseExample1", data: { "bs-toggle": "collapse" }, 'aria-expanded': "false", 'aria-controls': "multiCollapseExample1", 'role': "button"
  bs_btn "Toggle second element", data: { "bs-toggle": "collapse",  "bs-target": "#multiCollapseExample2" }, 'aria-expanded': "false", 'aria-controls': "multiCollapseExample2"
  bs_btn "Toggle both element", data: { "bs-toggle": "collapse",  "bs-target": ".multi-collapse" }, 'aria-expanded': "false", 'aria-controls': "multiCollapseExample1 multiCollapseExample2"
end

bs_row do
  bs_col do
    bs_collapse id: "multiCollapseExample1", card: "Random text for card body content #1", multi: true
  end
  bs_col do
    bs_collapse id: "multiCollapseExample2", card: "Random text for card body content #2", multi: true
  end
end

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <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>
  <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>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Random text for card body content #1
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Random text for card body content #2
      </div>
    </div>
  </div>
</div>