Bootstrap Create collapsible Components _javascript tips

This article will learn how to create collapsible components through bootstrap, as follows
what is required
you must refer to Jquery.js and bootstrap-collapse.js-these two JavaScript files are located in the Docs/assets/js folder.
You can create a collapsible component without writing a lot of JavaScript or calling JavaScript. The first instance of the
instance
demonstrates how to create a collapsible component without invoking JavaScript.

<! DOCTYPE html>  

explains
Here are three points to note. First, add data-toggle= "collapse" to the link you want to click to expand or collapse the component.
Second, add an href or a data-target attribute to the parent component whose value is the ID of the subassembly.
Third, add a Data-parent property to create an accordion effect. The value of the Data-parent property is the same as the value of the id attribute of the primary container div (which holds the entire accordion component). If you want to create a simple folding component that doesn't need to be as complex as an accordion, you don't need to add this property. The second instance of
instance
demonstrates how to create a simple collapsible component.

<! DOCTYPE html>  

Calling through JavaScript
You can use the following code to trigger the collapse through JavaScript.

Options, methods, and events
Here are some options, methods, events that are used by Bootstrap collapsible JavaScript Plug-ins. The details are as follows:
Options
Parent: The type of value is Selector. The default value is False. When the parent element is displayed, the collapsible elements under the parent element are closed.
Toggle: The type of value is Boolean. The default value is true. When invoked, toggles all collapsible elements.
Toggle: The type of value is Boolean. The default value is true. When invoked, toggles all collapsible elements.
Method
. Collapse (options): Triggers collapsible content. Accept an optional option object.
. Collapse (' toggle '): Shows or hides a collapsible page element.
. Collapse (' show '): Displays a collapsible page element.
. Collapse (hide): Hides a collapsible page element.
Events
Show: This event is immediately triggered when the show instance method is invoked.
Shown: This event is triggered when the collapsible page element is displayed (and the CSS transition effect is completed).
Hide: This event is immediately triggered when the Hide instance method is invoked.
Hidden: This event is triggered when the collapsible page element is hidden from the user (and the CSS transition effect is completed).

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn.