The official home of the Python Programming Language: Bootstrap Collapse Plugin

Bootstrap Collapse Plugin

The collapse plugin makes it easy to make collapsing divisions of the page. Whether you use it to build accordion navigation or content boxes, it allows for a lot of content options.

If you want to include this plugin functionality individually, then you will need collapse.js. This also requires the Transition Plugin to be included in your version of Bootstrap. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

You can use the collapse plugin:

To create collapsible groups or accordion. This can be created as in the sample example below:

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseOne">

Click me to exapand. Click me again to collapse.Section1

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wesanderson

cred nesciunt sapiente eaproident. Ad vegan excepteurbutcher

vice lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseTwo">

Click me to exapand. Click me again to collapse.Section2

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wesanderson

cred nesciunt sapiente eaproident. Ad vegan excepteurbutcher

vice lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseThree">

Click me to exapand. Click me again to collapse.Section3

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wesanderson

cred nesciunt sapiente eaproident. Ad vegan excepteurbutcher

vice lomo.

</div>

data-toggle="collapse" is added to the link on which you click to expand or collapse the component.

href or a data-target attribute is added to the parent component, whose value is id of the child component.

data-parent attribute is added to is added for creating accordion like effect.

To create simple collapsible without the accordion markup: This can be created as in the sample example below:

<button type="button" class="btnbtn-primary" data-toggle="collapse"

data-target="#demo">

simple collapsible

</button>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson

cred nesciunt sapiente eaproident. Ad vegan excepteurbutcher

vice lomo.

</div>

As you can see in the example we have created a simple collapsible component, unlike accordion, we haven't added the attribute data-parent.

Usage

Following table lists the classes collapse plugin utilizes to handle the heavy lifting:

Class

Description

.collapse

hides the content

.collapse.in

shows the content

.collapsing

is added when the transition starts, and removed when it finishes

You can use collapse plugin in two ways:

Via data attributes: Add data-toggle="collapse" and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute will accept a CSS selector to apply the collapse to. Be sure to add the class .collapse to the collapsible element. If you’d like it to default open, include the additional class .in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector".

Via JavaScript: The collapse method can activated with JavaScript as below:

$('.collapse').collapse()

Options

There are certain options which can be passed via data attributes or JavaScript are listed in the following table:

Option Name

Type/Default Value

Data attribute name

Description

parent

selector
Default: false

data-parent

If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this dependent on the accordion-group class)

toggle

boolean
Default: true

data-toggle

Toggles the collapsible element on invocation.

Methods

The following are some methods useful to use with collapsible elements.

Method

Description

Example

Options:.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#identifier').collapse({

toggle: false

})

Toggle:.collapse('toggle')

Toggles a collapsible element to shown or hidden.

$('#identifier').collapse('toggle')

Show:.collapse('show')

Shows a collapsible element.

$('#identifier').collapse('show')

Hide:.collapse('hide')

Hides a collapsible element.

$('#identifier').collapse('hide')

Example

The following example demonstrates the usage of methods:

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseOne">

Click me to exapand. Click me again to collapse.

Section 1--hide method

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wesanderson cred

nesciunt sapiente eaproident. Ad vegan excepteur butcher vice

lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseTwo">

Click me to exapand. Click me again to collapse.

Section 2--show method

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wesanderson cred

nesciunt sapiente eaproident. Ad vegan excepteur butcher vice

lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseThree">

Click me to exapand. Click me again to collapse.

Section 3--toggle method

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wesanderson cred

nesciunt sapiente eaproident. Ad vegan excepteur butcher vice

lomo.

</div>

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseFour">

Click me to exapand. Click me again to collapse.

Section 4--options method

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wesanderson cred

nesciunt sapiente eaproident. Ad vegan excepteur butcher vice

lomo.

</div>

$(function () { $('#collapseFour').collapse({

toggle: false

})});

$(function () { $('#collapseTwo').collapse('show')});

$(function () { $('#collapseThree').collapse('toggle')});

$(function () { $('#collapseOne').collapse('hide')});

</script>

Events

Following table lists few events for hooking into collapse functionality.

Event

Description

Example

show.bs.collapse

Fired after the show method is called.

$('#identifier').on('show.bs.collapse', function () {

// do something…

})

shown.bs.collapse

This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).

$('#identifier').on('shown.bs.collapse', function () {

// do something…

})

hide.bs.collapse

Fired when the hide instance method has been called.

$('#identifier').on('hide.bs.collapse', function () {

// do something…

})

hidden.bs.collapse

This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

$('#identifier').on('hidden.bs.collapse', function () {

// do something…

})

Example

The following example demonstrates the usage of events:

<a data-toggle="collapse" data-parent="#accordion"

href="#collapseexample">

Click me to exapand. Click me again to collapse.

Section --shown event

</a>

</h4>

</div>

Nihil anim keffiyehhelvetica, craft beer labore wesanderson

cred nesciunt sapiente eaproident.

Ad vegan excepteur butcher vice lomo.

</div>

$(function () {

$('#collapseexample').on('show.bs.collapse', function () {

alert('Hey, this alert shows up when you expand it');})

});

</script>

The official home of the Python Programming Language

Bootstrap Collapse Plugin

ليست هناك تعليقات:

إرسال تعليق