We now have a youtube channel. Subscribe

Bootstrap | Collapse Plugin

Bootstrap | Collapse Plugin


Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about the Bootstrap Collapse Plugin.

Bootstrap collapse plugin makes it easy to make collapsing divisions of the web page. Whether you use it in building an accordion navigation or content boxes, it allows for a lot of content options.

If you want to add this bootstrap plugin functionality individually, you are going to need collapse.js. This also needs the transition plugin to be included in your Bootstrap version. Else, as mentioned in the tutorial Bootstrap plugins overview, you can add bootstrap.js or the manified bootstrap.min.js.

You can use the collapse plugin -

  • To create collapsible groups or accordion - This can be created as seen in the simple example below -
<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>
  • data-toggle = "collapse" is added to the link which you click to expand or collapse the component.
  • href or a data-target is added to the parent component, whose value is id of the child component.
  • data-parent attribute is added for creating the accordion like effect.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
  • To create simple collapsible without the accordion markup - This can be created as shown in the example below -
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>


Usage

The following table lists the classes that the collapse plugin utilizes to handle the heavy lifting -

Sr.No.Class &Description
1

.collapse

Hides the content.

2

.collapse.in

Shows the content.

3

.collapsing

Is added when the transition starts, and removed when it finishes.


You can make use of collapse plugin in two ways -

  • By using data attributes - add data-toggle = "collapse" and a data-target to the element to 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 .collapse class to the collapsible element. If you would like it to default open, add the additional class .in.

    In order to add accordion like group management to a collapsible control, add the data attribute data-parent = "#selector".
  • Via JavaScript - The collapse method can be activated using JavaScript as shown below -
$('.collapse').collapse()

Options

There are certain options that can be added via data attributes or JavaScript. Following table below lists these options -

Option NameType/Default ValueData attribute nameDescription
parentselector Default − falsedata-parentIf selector is false, then all collapsible elements under the specified parent will be closed (similar to traditional accordion behavior - this dependent on the accordion-group class).
toggleboolean Default − truedata-toggleToggles the collapsible element on invocation.


Methods

Following is a list of some useful methods that are used with collapsible element -

MethodDescriptionExample

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

Following example demonstrates the usage of the collapse plugin methods -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
  
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>  

Output

When the above example is executed, it will produce the following result -

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.


Events

Following table lists a few events that can be used with the collapse functionality -

EventDescriptionExample
show.bs.collapseFired after the show method is called.
$('#identifier').on('show.bs.collapse', function () {
   // do something
})
shown.bs.collapseThis 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.collapseFired when the hide instance method has been called.
$('#identifier').on('hide.bs.collapse', function () {
   // do something
})
hidden.bs.collapseThis 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

Following example demonstrates the usage of collapse plugin events -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script> 

Output

When the above example is executed, it will produce the following result -

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Carousel Plugin.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022.WebDesignTutorialz. All rights reserved. Developed by Jago Desain