Bootstarp creates collapsible components_javascript tips
This article will learn how to create collapsible components through Bootstarp. The specific content is as follows
What is required
You must reference jquery.js and bootstrap-collapse.js - both JavaScript files are located in the docs/assets/js folder.
You can create collapsible components without writing a lot of JavaScript or calling JavaScript.
Example
The first example demonstrates how to create a collapsible component without calling JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>collapsible example</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<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">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
Explanation
There are three points to note here. 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 child component.
Third, add a data-parent attribute to create an accordion effect. The value of the data-parent attribute is the same as the value of the id attribute of the main container div (which holds the entire accordion component). If you want to create a simple accordion component that doesn't need to be as complex as an accordion, you don't need to add this property.
Example
The second example shows how to create a simple collapsible component.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
Call via JavaScript
You can use the code below to trigger collapse via JavaScript.
$(".collapse").collapse() Options, methods and events
Here are some options, methods, and events available through the Bootstrap Collapsible JavaScript plugin. The details are as follows:
Options
parent:The value type is Selector. The default value is false. When the parent element is displayed, all collapsible elements under the parent element are closed.
toggle:The value is of type Boolean. The default value is true. When called, toggle all collapsible elements.
toggle:The value is of type Boolean. The default value is true. When called, toggle all collapsible elements.
Method
.collapse(options): Trigger collapsible content. Accepts an optional option object.
.collapse('toggle'): Show or hide a collapsible page element.
.collapse('show'): Displays a collapsible page element.
.collapse(hide): Hide a collapsible page element.
Event
show: This event is triggered immediately after the show instance method is called.
shown: This event is triggered when the collapsible page element is displayed (and the CSS transition effect has been executed).
hide: This event is triggered immediately after the hide instance method is called.
hidden: This event is triggered when the collapsible page element is hidden from the user (and the CSS transition effect has been completed).
The above is the entire content of this article, I hope it will be helpful to everyone’s study.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1391
52
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
Google Pixel 9 Pro Fold phone case exposed: 6.4-inch outer screen, 8.02-inch inner screen
Jun 25, 2024 pm 02:35 PM
According to news on June 25, the source ytechb published a blog post yesterday (June 24), sharing a rendering of the Google Pixel 9 Pro Fold mobile phone case, once again showing the design of the back of this folding screen. According to previous news, Google will release the Pixel 9 series of mobile phones in October this year. In addition to the three phones in the Pixel 9 series, Pixel Fold will also be included in the Pixel 9 series and will be officially named Pixel 9 Pro Fold. The phone case exposed this time comes from accessory manufacturer Torro. The company's UK and US online stores have listed the product phone case and disclosed the design and display size of the phone. The page shows a large number of Pixel 9 Pro Fold phone case renderings
Samsung's 10,000-yuan foldable phone W25 revealed: 5-megapixel under-screen front camera and thinner body
Aug 23, 2024 pm 12:43 PM
According to news on August 23, Samsung is about to launch a new folding mobile phone W25, which is expected to be unveiled at the end of September. It will make corresponding improvements in the under-screen front camera and body thickness. According to reports, Samsung W25, codenamed Q6A, will be equipped with a 5-megapixel under-screen camera, which is an improvement over the 4-megapixel camera of the Galaxy Z Fold series. In addition, the W25’s external-screen front camera and ultra-wide-angle camera are expected to be 10 million and 12 million pixels respectively. In terms of design, the W25 is about 10 mm thick in the folded state, which is about 2 mm thinner than the standard Galaxy Z Fold 6. In terms of screen, the W25 has an external screen of 6.5 inches and an internal screen of 8 inches, while the Galaxy Z Fold6 has an external screen of 6.3 inches and an internal screen of 8 inches.
How to implement calendar component using Vue?
Jun 25, 2023 pm 01:28 PM
Vue is a very popular front-end framework. It provides many tools and functions, such as componentization, data binding, event handling, etc., which can help developers build efficient, flexible and easy-to-maintain Web applications. In this article, I will introduce how to implement a calendar component using Vue. 1. Requirements analysis First, we need to analyze the requirements of this calendar component. A basic calendar should have the following functions: display the calendar page of the current month; support switching to the previous month or next month; support clicking on a certain day,
Samsung Galaxy Z Flip 6 model first revealed: narrower bezels, creases still present
Jun 22, 2024 am 03:28 AM
According to news on June 21, foreign media recently released model photos of Samsung Galaxy Z Flip 6 on the Internet. According to the picture, it can be understood that the borders of Samsung Galaxy Z Flip 6 will be further narrowed, which means that the width of the phone may be reduced in the folded state, and it will also provide a more comfortable grip and portability. Moreover, compared with the previous generation ZFlip5, the model of Galaxy ZFlip6 is more square and the camera module on the back is more prominent. It is expected to use a new camera sensor. However, from the front, the creases of the phone are still relatively obvious, but considering that the leaked model is a model phone, there may be some differences with the real phone, so it is for reference only. In terms of performance configuration, Galaxy
The biggest shortcoming of foldable screen mobile phones: no core application scenarios
Mar 16, 2024 am 09:04 AM
What we are discussing today is not what a certain product is like, but returning to the topic of "folding screen" itself and exploring the "rationality" of folding screen mobile phones. First, let’s take a look at the market performance of folding screen mobile phones. According to IDC’s latest data report, China’s folding screen mobile phone market will ship approximately 7.007 million units in 2023, a year-on-year increase of 114.5%. Among them, China's foldable screen mobile phone market shipped approximately 2.771 million units in the fourth quarter of 2023, a year-on-year increase of 149.6%. The data does look good, and the growth is also very strong. However, compared with the approximately 270 million smartphone shipments in the Chinese market in 2023, this data is really not enough. In general
IDC estimates that global smartphone shipments in 2024 will be 1.2 billion units: 25 million foldable screen units, a year-on-year increase of 37%
Feb 24, 2024 pm 02:20 PM
According to news on February 24, IDC recently released a market research report, predicting that global smartphone shipments will reach 1.2 billion units in 2024, a year-on-year increase of 2.8%, and will then maintain low single-digit growth by 2028. IDC believes that overall shipments in 2024 will still be below pre-pandemic levels, but the global smartphone market has bottomed out and is beginning to show an upward trend in recovery. IDC believes that the two key factors driving the overall market recovery are the equipment refresh cycle and the growth of demand in emerging markets. There are also two main driving forces. IDC estimates that folding screen mobile phone shipments will reach 25 million units in 2024, a year-on-year increase of 37%; the other is that artificial intelligence (AI) has quickly become a part of the discussion on smartphones, triggering
Do you want to know about word folding?
Mar 19, 2024 pm 07:49 PM
After editing text content in Word, you need to view and check the edited content. If there is a lot of content, it is inconvenient to read it. How to solve this problem? In this case, the word folding method is needed. Let me share the method tutorial with you guys! First, open the Word document on your computer, enter the required content and select it, then click the "Start" option in the menu bar, and then select a style to apply to the text paragraph you just selected. You can refer to the part marked with a red circle in the picture below. 2. Then, the selected text paragraph will change its style and add a small arrow, as shown in the red circle in the picture below: 3. Click the small arrow to freely expand or collapse the previously selected text paragraph, or directly Right click, from
