Hướng dẫn collapse bootstrap 4 - thu gọn bootstrap 4

Question

Đây là hiệu ứng khi click chuột vào button sẽ có khung chứa nội dung trượt xuống và hiển thị nội dung cho người xem. Thường dùng để giấu thông tin bắt người dùng click vào để xem được thông tin đó, hoặc dùng làm cho trang web được gọn lại thay vì hiển thị toàn bộ. Collapse được hỗ trợ sẵn trong thư viện Bootstrap

Nội dung chính Show

Code Collapse Bootstrap ví dụ
Code Collapse Bootstrap đầy đủ
Nhiều mục tiêu
Nhiều mục tiêu
Ví dụ về accordion
Cách sử dụng
Thông qua các thuộc tính dữ liệu
Thông qua JavaScript
Tùy chọn
Phương pháp
Sự kiện

Để sử dụng Collapse trong Bootstrap bao gồm 2 thành phần

- 1. Là Button để click vào và hiển thị nội dung
- 2. Nội dung đã ẩn đi chỉ hiển thị khi click vào button trên

Code Collapse Bootstrap ví dụ



Đây là chi tiết hiển thị sau khi click vào button trên

Nhìn vào code ví dụ trên các bạn để ý 2 thuộc tính sau:

data-target=”#demo”
id=”demo”

Đây là 2 thuộc tính ID để cho ta biết khi click vào button nào thì nội dung nào được hiển thị thông qua id cụ thể ở đây là “demo”

Code Collapse Bootstrap đầy đủ



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

Rất đơn giản phải không.

Chuyển đổi khả năng hiển thị của nội dung trong dự án của bạn với một vài lớp và các plugin JavaScript của chúng tôi.

Thí dụ

Nhấp vào các nút bên dưới để hiển thị và ẩn một phần tử khác thông qua các thay đổi lớp:

.collapse ẩn nội dung
.collapsing được áp dụng trong quá trình chuyển đổi



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

0 hiển thị nội dung

Bạn có thể sử dụng một liên kết với thuộc tính



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

1 hoặc nút có thuộc tính



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

2. Trong cả hai trường hợp,



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

3 là bắt buộc.

Liên kết với href

Anim pariatur sáo rỗng repreeterenderit, enim eiusmod high is accusamus terry Richardson ad squid. Nihil Anim Keffiyeh Helvetica, Craft Bia Labore Wes Anderson Cred Nesciunt Sapiente Ea Proident.


   class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  
   class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  

 class="collapse" id="collapseExample">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Nhiều mục tiêu

A Nhiều



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

4 hoặc



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

5 có thể hiển thị và ẩn một phần tử nếu mỗi người tham khảo nó bằng thuộc tính



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

1 hoặc



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

2 của họ

Chuyển đổi phần tử đầu tiên

Anim pariatur sáo rỗng repreeterenderit, enim eiusmod high is accusamus terry Richardson ad squid. Nihil Anim Keffiyeh Helvetica, Craft Bia Labore Wes Anderson Cred Nesciunt Sapiente Ea Proident.


   class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements

 class="row">
 class="col">
 class="collapse multi-collapse" id="multiCollapseExample1">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.



 class="col">
 class="collapse multi-collapse" id="multiCollapseExample2">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Nhiều mục tiêu

A Nhiều



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

4 hoặc



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

5 có thể hiển thị và ẩn một phần tử nếu mỗi người tham khảo nó bằng thuộc tính



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

1 hoặc



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

2 của họ

Chuyển đổi phần tử đầu tiên

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Ví dụ về accordion

Sử dụng thành phần thẻ, bạn có thể mở rộng hành vi sụp đổ mặc định để tạo một accordion.

Nếu phần tử điều khiển của bạn đang nhắm mục tiêu một phần tử có thể thu gọn - tức là thuộc tính



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

2 đang trỏ đến bộ chọn


   class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements

 class="row">
 class="col">
 class="collapse multi-collapse" id="multiCollapseExample1">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.



 class="col">
 class="collapse multi-collapse" id="multiCollapseExample2">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

0 - bạn nên thêm thuộc tính


   class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements

 class="row">
 class="col">
 class="collapse multi-collapse" id="multiCollapseExample1">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.



 class="col">
 class="collapse multi-collapse" id="multiCollapseExample2">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

1 vào phần tử điều khiển, chứa


   class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements

 class="row">
 class="col">
 class="collapse multi-collapse" id="multiCollapseExample1">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.



 class="col">
 class="collapse multi-collapse" id="multiCollapseExample2">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

0 của phần tử có thể thu gọn. Trình đọc màn hình hiện đại và các công nghệ hỗ trợ tương tự sử dụng thuộc tính này để cung cấp cho người dùng các phím tắt bổ sung để điều hướng trực tiếp đến chính phần tử có thể thu gọn.

Lưu ý rằng việc triển khai hiện tại của Bootstrap không bao gồm các tương tác bàn phím khác nhau được mô tả trong mẫu thực hành tác giả WAI -ARIA 1.1 Mẫu accordion - bạn sẽ cần phải bao gồm những điều này với JavaScript tùy chỉnh.

Cách sử dụng

Plugin sụp đổ sử dụng một vài lớp để xử lý việc nâng vật nặng:

.collapse che giấu nội dung



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

0 hiển thị nội dung

.collapsing được thêm vào khi quá trình chuyển đổi bắt đầu và loại bỏ khi nó kết thúc

Các lớp này có thể được tìm thấy trong


   class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element
   class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements

 class="row">
 class="col">
 class="collapse multi-collapse" id="multiCollapseExample1">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.



 class="col">
 class="collapse multi-collapse" id="multiCollapseExample2">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

6.

Thông qua các thuộc tính dữ liệu

Chỉ cần thêm



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

3 và



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

2 vào phần tử để tự động chỉ định điều khiển của một hoặc nhiều phần tử có thể thu gọn. Thuộc tính



	
		
		
		
		
	
	
		
			
			
			Đây là chi tiết hiển thị sau khi click vào button trên

2 chấp nhận bộ chọn CSS để áp dụng sự sụp đổ. Hãy chắc chắn để thêm lớp

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

0 vào phần tử có thể thu gọn. Nếu bạn thích nó để mặc định mở, hãy thêm lớp


   class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  
   class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  

 class="collapse" id="collapseExample">
 class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

4 bổ sung.

Để thêm quản lý nhóm giống như accordion vào khu vực thu gọn, hãy thêm thuộc tính dữ liệu

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

2. Tham khảo bản demo để xem điều này trong hành động.

Thông qua JavaScript

Bật thủ công với:

$('.collapse').collapse()

Tùy chọn

Các tùy chọn có thể được truyền qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

3, như trong

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

4.

Tên Loại hình Mặc định Sự mô tả

cha mẹ

bộ chọn | Đối tượng jQuery | Phần tử DOM

sai

Nếu cha mẹ được cung cấp, thì tất cả các phần tử có thể thu gọn trong cha mẹ được chỉ định sẽ được đóng khi mục có thể thu gọn này được hiển thị. (Tương tự như hành vi accordion truyền thống - Điều này phụ thuộc vào lớp

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

5). Thuộc tính phải được đặt trên khu vực có thể thu gọn mục tiêu.

Chuyển đổi Boolean thật Bật phần tử có thể thu gọn khi gọi

Phương pháp

Phương pháp và chuyển tiếp không đồng bộ

Tất cả các phương thức API đều không đồng bộ và bắt đầu chuyển đổi. Họ trở lại với người gọi ngay khi quá trình chuyển đổi được bắt đầu nhưng trước khi nó kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua.asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin.

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1


    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

6

Kích hoạt nội dung của bạn như một yếu tố thu gọn. Chấp nhận một tùy chọn tùy chọn

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

7.

$('#myCollapsible').collapse({
  toggle: false
})

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1


    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

8

Bật một phần tử có thể thu gọn để hiển thị hoặc ẩn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã được hiển thị hoặc ẩn (nghĩa là trước khi sự kiện

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

9 hoặc

$('.collapse').collapse()

0 xảy ra).Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

9 or

$('.collapse').collapse()

0 event occurs).

$('.collapse').collapse()

1

Hiển thị một yếu tố thu gọn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã được hiển thị (nghĩa là trước khi sự kiện

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

9 xảy ra).Returns to the caller before the collapsible element has actually been shown (i.e. before the

 id="accordion">
   class="card">
     class="card-header" id="headingOne">
       class="mb-0">
         class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        
      
    

     id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingTwo">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        
      
    
     id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      
    
  
   class="card">
     class="card-header" id="headingThree">
       class="mb-0">
         class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        
      
    
     id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
       class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

9 event occurs).

$('.collapse').collapse()

3

Ẩn một yếu tố thu gọn. Trả về cho người gọi trước khi phần tử có thể thu gọn thực sự đã bị ẩn (nghĩa là trước khi sự kiện

$('.collapse').collapse()

0 xảy ra).Returns to the caller before the collapsible element has actually been hidden (i.e. before the

$('.collapse').collapse()

0 event occurs).

$('.collapse').collapse()

5

Phá hủy một yếu tố sụp đổ.

Sự kiện

Lớp sụp đổ của Bootstrap, phơi bày một vài sự kiện để kết nối với chức năng sụp đổ.

Loại sự kiện	Sự mô tả
cha mẹ	bộ chọn \| Đối tượng jQuery \| Phần tử DOM
sai	Nếu cha mẹ được cung cấp, thì tất cả các phần tử có thể thu gọn trong cha mẹ được chỉ định sẽ được đóng khi mục có thể thu gọn này được hiển thị. (Tương tự như hành vi accordion truyền thống - Điều này phụ thuộc vào lớp id="accordion"> class="card"> class="card-header" id="headingOne"> class="mb-0"> class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. class="card"> class="card-header" id="headingTwo"> class="mb-0"> class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. class="card"> class="card-header" id="headingThree"> class="mb-0"> class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 5). Thuộc tính phải được đặt trên khu vực có thể thu gọn mục tiêu.
Chuyển đổi	Boolean
thật	Bật phần tử có thể thu gọn khi gọi

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

programming bootstrap Collapse Bootstrap 4 Collapse Bootstrap 5 Collapse Bootstrap 3 Data-toggle=collapse Collapse bootstrap codepen Data-toggle HTML data-toggle bootstrap 4 Toggle Bootstrap 4

Hướng dẫn collapse bootstrap 4 - thu gọn bootstrap 4

Code Collapse Bootstrap ví dụ

Code Collapse Bootstrap đầy đủ

Thí dụ

Nhiều mục tiêu

Nhiều mục tiêu

Ví dụ về accordion

Cách sử dụng

Thông qua các thuộc tính dữ liệu

Thông qua JavaScript

Tùy chọn

Phương pháp

Phương pháp và chuyển tiếp không đồng bộ

id="accordion"> class="card"> class="card-header" id="headingOne"> class="mb-0"> class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1

id="accordion"> class="card"> class="card-header" id="headingOne"> class="mb-0"> class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1

$('.collapse').collapse()1

$('.collapse').collapse()3

$('.collapse').collapse()5

Sự kiện

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

`id="accordion"> class="card"> class="card-header" id="headingOne"> class="mb-0"> class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1`

`id="accordion"> class="card"> class="card-header" id="headingOne"> class="mb-0"> class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1`

`$('.collapse').collapse()`
1

`$('.collapse').collapse()`
3

`$('.collapse').collapse()`
5