Components Collapsible
BasMaterial UI logo

© BasMaterial UI - v0.2.8

Notifications
View All

Collapsible

Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.

Accordion

Basic collapsible.

  • Collapsible #1
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
  • Collapsible #2
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
  • Collapsible #3
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee. 

<ul class="bas-ui-collapsible" data-collapsible="accordion">
    <li>
        <div class="bas-ui-collapsible-header">
            <a><i class="mdi mdi-image-filter-drama bas-ui-icon bas-ui-icon-left bas-ui-icon-24"></i>Collapsible #1</a>
        </div>
        <div class="bas-ui-collapsible-body collapse in">
            <div class="bas-ui-collapsible-body-inner">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
            </div>
        </div>
    </li>
    <li>
        <div class="bas-ui-collapsible-header">
            <a><i class="mdi mdi-map-marker bas-ui-icon bas-ui-icon-left bas-ui-icon-24"></i>Collapsible #2</a>
        </div>
        <div class="bas-ui-collapsible-body collapse">
            <div class="bas-ui-collapsible-body-inner">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
            </div>
        </div>
    </li>
    <li>
        <div class="bas-ui-collapsible-header">
            <a><i class="mdi mdi-fire bas-ui-icon bas-ui-icon-left bas-ui-icon-24"></i>Collapsible #3</a>
        </div>
        <div class="bas-ui-collapsible-body collapse">
            <div class="bas-ui-collapsible-body-inner">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
            </div>
        </div>
    </li>
</ul>

Popout

For create collapsible popout add the class popout.

  • Collapsible #1
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
  • Collapsible #2
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
  • Collapsible #3
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee. 

<ul class="bas-ui-collapsible popout" data-collapsible="accordion">
...<li class="active">
        <div class="bas-ui-collapsible-header">...

Expandable

For create collapsible expandable add in the data-collapsible expandable.

  • Collapsible #1
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
  • Collapsible #2
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
  • Collapsible #3
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee. 

<ul class="bas-ui-collapsible" data-collapsible="expandable">
...

Initialization

JavaScript dynamic initialization (Optional).


$('.bas-ui-collapsible-body').bas_ui_collapsible();

Options

Option Name Type Default Description
toggle boolean true Toggles the collapsible element on invocation

Sample use to options.


$('.bas-ui-collapsible-body').bas_ui_collapsible({
    toggle: false
});

Methods

Toggles a collapsible element to shown or hidden.


$('.bas-ui-collapsible-body').bas_ui_collapsible('toggle');

Shows a collapsible element.


$('.bas-ui-collapsible-body').bas_ui_collapsible('show');

Hides a collapsible element.


$('.bas-ui-collapsible-body').bas_ui_collapsible('hide');

Events

Option Name Description
show.bas.collapsible This event fires immediately when the show instance method is called.
shown.bas.collapsible This event is fired when a collapsible element has been made visible to the user (will wait for CSS transitions to complete).
hide.bas.collapsible This event is fired immediately when the hide method has been called.
hidden.bas.collapsible This event is fired when a collapsible element has been hidden from the user (will wait for CSS transitions to complete).

Sample event.


$('.bas-ui-collapsible-body').on('hidden.bas.collapsible', function () {
    // do something...
});