Home > Developer > JavaScript
Selecting a collapsed item collapse is not commonly used in Web pages, but it is not uncommon.
This is a more practical component.
Collapsed item collapse only one item can be turned on by default.
I. BASIC OBJECTIVES
Use bootstrap to write a selection of collapsed items such as:
The terms of service 2 is open when the page is opened.
Click on a different collapsed item and the rest will be closed, and this will open.
Second, the production process
1. With the previous "JavaScript" using bootstrap to write a pop-up dialog on the current page, you can close the first step without jumping, non-pop window (click to open the link)
Because the need to use bootstrap, so first on the official website (click Open link) to download the components, for the production environment bootstrap version (click Open link), BOOTSTRAP3 is not compatible with 2, we recommend to use BOOTSTRAP3 directly according to their development documents. This article is also made according to BOOTSTRAP3. While BOOTSTRAP3 provides JavaScript effect to jQuery1.11 (click to open link) support, can go to the jquery official website to download compatible with the old browser IE6 jQuery1.11 (click the Open link), not incompatible with the IE6 of the old browser JQuery2. When you are finished downloading, configure the site directory. The Bootstrap3 directly extracted to the site directory, and put jquery-1.11.1.js into the JS directory, that is, the same directory with Bootstrap.js, the structure of the site folder is roughly as follows:
2. This page is encoded as follows, a fragment of the following snippet is analyzed:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">(1)
(2) <body> part, is a choice of folding items collapseThe layout of collapse, for example,
Then there is the following code:
<!--declare a layout that selects collapsed items--><div class= "Panel-group" id= "accordion" role= "Tablist" aria-multiselectable= "true" > <!--This is the heading style for each selection of collapsed items, with Panel-default/info/success/warning/danger select--><div class= "Panel Panel-info" > &L t;! --Declare the layout of a heading part--><div class= "panel-heading" > <!--title font can also be modified by styling-->
(1)
JavaScript uses bootstrap to write a selection of collapsed items collapse
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
