Bootstrap Folding (Collapse) plug-in usage examples _javascript tips

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster. Below through this article to introduce bootstrap folding (Collapse) plug-in usage examples, together to see!

A folding (Collapse) plug-in can easily fold a page area. Whether you use it to create a collapsed navigation or a content panel, it allows a lot of content options.

If you want to refer to the functionality of the plug-in separately, you need to refer to collapse.js. Also, you need to refer to the Transition (transition) plug-in in your Bootstrap version. Alternatively, as mentioned in the Bootstrap Plug-in Overview chapter, you can refer to the Bootstrap.js or compressed version of Bootstrap.min.js.

You can use the collapse (Collapse) Plug-in:

Create a collapsible grouping or folding panel (accordion), as follows:

<! DOCTYPE html>  

The results are as follows:

data-toggle= "Collapse" is added to the link for the component you want to expand or collapse.

The href or data-target attribute is added to the parent component, and its value is the ID of the child component.

The data-parent property adds the ID of the accordion (accordion) to the link for the component that you want to expand or collapse.

Create a simple collapsible component (collapsible) with no accordion tag, as follows:

<! DOCTYPE html>
 
 

The results are as follows:

As you can see in the example, we created a collapsible component, unlike the folding panel (accordion), where we didn't add the attribute data-parent.

Usage

The following table lists the folding (Collapse) plug-ins that are used to handle the heavy scalable class:

You can use the folding (Collapse) plug-in in the following two ways:

With the Data property: Add data-toggle= "collapse" and data-target to the element to automatically assign control of the collapsible element. The Data-target property accepts a CSS selector and applies a folding effect to it. Make sure to add class. Collapse to the collapsible element. If you want it to be open by default, add an extra class.

To add a group management similar to a collapsed panel to a collapsible control, add the Data property data-parent= "#selector."

JavaScript: The collapse method can be activated via JavaScript, as follows:

$ ('. Collapse '). Collapse ()

Options

Some options are passed through the Data property or JavaScript. The following table lists the options:

Method

The following are useful methods in some folding (Collapse) Plug-ins:

Instance

The following example demonstrates the use of the method:

<! DOCTYPE html>  

The results are as follows:

Event

The following table lists the events to be used in the collapsed (Collapse) plug-in. These events can be used as hooks in the function.

Instance

The following example demonstrates the use of an event:

<! DOCTYPE html>  

The results are as follows:

The above is a small series to introduce the bootstrap folding (Collapse) plug-in usage examples of the relevant content, I hope to help you!