Collapser Widget
This widget expands or collapses the target element. It is not visible when collapsed but visible when expanded.
Options
Collapsed | data-collapser-collapsed | Boolean | Optional
Default state of the collapser. If no value is provided, it defaults to false.
Collapsed Icon Class | data-collapser-collapsed_icon_class | String | Optional
Default Font Awesome icon when the collapser is collapsed. If no value is provided, it defaults to 'fa-plus-square-o'.
Expanded Icon Class | data-collapser-expanded_icon_class | String | Optional
Default Font Awesome icon when the collapser is expanded. If no value is provided, it defaults to 'fa-minus-square-o'.
Additional Classes | data-collapser-additional_classes | String | Optional
Provide additional CSS-Classes which should be added. If no value is provided, it defaults to 'pull-right', which applies a CSS 'float: right' style.
Target Selector | data-collapser-target_selector | String | Required
Provide the target selector, which is the element thath will be collapsed or expanded.
Parent Selector | data-collapser-parent_selector | String | Optional
Provide a parent selector for the collapser. It's empty by default.
Example
When the page loads, the collapser widget will be added to the <div> element.
On click, the target selector will be shown or hidden.
<div class="headline-wrapper"
data-gx-widget="collapser"
data-collapser-target_selector=".content-wrapper"
data-collapser-section="category_base_data"
data-collapser-user_id="1"
data-collapser-collapsed="true">
Click This Headline
</div>
<div class="content-wrapper">
Toggled content
</div>
- Source:
- To Do:
-
- Make the styling for this widget (like it is on the products site) more general. Currently, the "div" element has to be wrapped in another "div" with specific CSS-Classes like ".gx-container" and ".frame-head".