Hướng dẫn bootstrap 4 accordion - bootstrap 4 accordion

What is Lorem Ipsum?

Xem ví dụ đầy đủ:

collapse-example.html

   
      
      Dropdown Example
      
   
   
      

         
Collapse Example

         
             What is Lorem Ipsum?
         
         

            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ...
         

         



         
             Why do we use it?
         
         

            It is a long established fact that a reader will be distracted by the
            readable content of a page when looking at its layout...
         
      
      
      
      
   

Collapse bao gồm 2 thành phần, button [hoặc Link] và mục tiêu [target], khi người dùng nhấn vào button, mục tiêu sẽ được ẩn hoặc hiện. Bootstrap sử dụng jQuery để xử lý hoạt động này. bao gồm 2 thành phần, button [hoặc Link] và mục tiêu [target], khi người dùng nhấn vào button, mục tiêu sẽ được ẩn hoặc hiện. Bootstrap sử dụng jQuery để xử lý hoạt động này.

1. Ban đầu lớp .collapse được áp dụng cho mục tiêu [target], lúc này mục tiêu đang ẩn..collapse được áp dụng cho mục tiêu [target], lúc này mục tiêu đang ẩn.
2. Người dùng nhấn vào button, lớp .collapsing được áp dụng cho mục tiêu. Bạn sẽ thấy mục tiêu đang được mở rộng [expand].button, lớp .collapsing được áp dụng cho mục tiêu. Bạn sẽ thấy mục tiêu đang được mở rộng [expand].
3. Cuối cùng khi nội dung đã được hiển thị hoàn toàn, mục tiêu sẽ được thiết lập lớp .collapse.show.collapse.show

Show/Hide Target 1 Show/Hide Target 2 Toggle both Targets

3- Accordion

Accordion là một thành phần giao diện, nó được tạo thành từ nhiều ".card" xếp chồng lên nhau theo chiều thẳng đứng. Mỗi .card có thể được mở rộng [expand] hoặc thu nhỏ [collapse] tùy thuộc vào việc cấu hình. là một thành phần giao diện, nó được tạo thành từ nhiều ".card" xếp chồng lên nhau theo chiều thẳng đứng. Mỗi .card có thể được mở rộng [expand] hoặc thu nhỏ [collapse] tùy thuộc vào việc cấu hình.

Đây là hình ảnh minh họa cấu trúc của một Accordion:Accordion:

accordion-example.html

   
      
      Accordion Example
      
   
   
      

         
Accordion Example

         

            

               

                  
                     
                     Javascript
                     
                  
               
               

                  

                     JavaScript is a scripting or programming language that
                     allows you to implement complex things on web pages ..
                  
               
            

            

               

                  
                     
                     Css
                     
                  
               
               

                  

                     CSS stands for Cascading Style Sheets.
                     CSS describes how HTML elements are to be displayed on screen,
                     paper, or in other media ..
                  
               
            

            

               

                  
                     
                     Bootstrap
                     
                  
               
               

                  

                     Bootstrap is a free front-end framework for faster and easier web development.
                     Bootstrap includes HTML and CSS based design templates for typography ...