Default Pattern
 
Welcome visitor you can login or create an account.

Accordions

Accordions Designs

Client side of the template based on «Twitter Bootstrap». On this section you will find examples of how to use the basic styles of «Twitter Bootstrap» and other styles, with help of which you will be able to design and make almost any interested you website page. In this template, we have also added a number of styles and advanced features that make the «Precise» very flexible template that is suitable for all business tasks.

About

Get base styles and flexible support for collapsible components like accordions and navigation.

* Requires the Transitions plugin to be included.

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence. «Itembridge» offers a number of creative products such as: online stores templates, one page promo sites, graphic works and corporate style for the wide audience. The company owes its success to the friendly team of professionals, who create exclusive designs, unique and clear functionality of the templates. Corporate style and graphic works always have the perfect design so you do not have to change a lot of settings to achieve the desired style.
«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence. «Itembridge» offers a number of creative products such as: online stores templates, one page promo sites, graphic works and corporate style for the wide audience. The company owes its success to the friendly team of professionals, who create exclusive designs, unique and clear functionality of the templates. Corporate style and graphic works always have the perfect design so you do not have to change a lot of settings to achieve the desired style.
«Itembridge» сompany became famous among thousands of visitors and purchasers of the most known online resource copyright works during the short period of its existence. «Itembridge» offers a number of creative products such as: online stores templates, one page promo sites, graphic works and corporate style for the wide audience. The company owes its success to the friendly team of professionals, who create exclusive designs, unique and clear functionality of the templates. Corporate style and graphic works always have the perfect design so you do not have to change a lot of settings to achieve the desired style.
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
</div>
  ...
                

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    simple collapsible
</button>

<div id="demo" class="collapse in"> … </div>
                

Usage

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts 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, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

$(".collapse").collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Name type default description
parent selector false If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
toggle boolean true Toggles the collapsible element on invocation

Methods

.collapse(options)

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

  $('#myCollapsible').collapse({
    toggle: false
  })
                

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide method has been called.
hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
  $('#myCollapsible').on('hidden', function () {
    // do something…
  })