引导程序4 |手风琴

下面的示例通过扩展面板组件来显示一个简单的手风琴。使用data-parent属性可确保在显示可折叠项之一时关闭指定父级下的所有可折叠元素。
手风琴种类繁多

• 默认手风琴
• 带图标的手风琴
• 手风琴与渐变背景
• 带图片的手风琴

在下面，您将通过适当的示例看到其中的每一个。

默认手风琴：这是基本的手风琴，此手风琴没有特殊要求，但是您可以轻松地自己设计此手风琴。
• 例子：

    
  
      Bootstrap Collapse Demonstration
    
      
      
    
      
    
      
      
    
      
      
    
      
      
    
      
    
          
              
    
                   
                   GeeksforGeeks 
                  
                  A Computer Science Portal for Geeks
    
                  
                      
                          
                               
                                     GeeksforGeeks 
                               
                          
    
                          
                              
                                GeeksforGeeks is a computer science portal.
                                It is the best platform to lean programming.
                              
                          
                      
    
                      
                          
                               
                                 Bootstrap 
                               
                          
                          
                              
                                 Bootstrap is free and open-source 
                                 collection of tools for creating 
                                 websites and web applications.
                              
                          
                      
    
                      
                          
                               
                                 HTML 
                              
                          
                          
                              
                                HTML stands for HyperText Markup Language. 
                                It is used to design web pages using markup
                                language.
                              
                          
                      
                  
              
          
    

• 输出：
  

  具有可更改图标的手风琴：此示例将向您展示如何在font-awesome的帮助下在手风琴中添加加号和减号图标，以及当您借助jQuery打开手风琴时如何进行切换。

  • 例子：

      
    
        
        
          
        Bootstrap 4 Accordion 
          
        
          
        
          
        
        
          
        
        
          
        
        
          
        
            .accordion {
                margin: 15px;
            }
              
            .accordion .fa {
                margin-right: 0.2rem;
            }
        
          
        
            $(document).ready(function() {
              
                // Add minus icon for collapse element which
                // is open by default
                $(".collapse.show").each(function() {
                    $(this).prev(".card-header").find(".fa")
                        .addClass("fa-minus").removeClass("fa-plus");
                });
      
                // Toggle plus minus icon on show hide
                // of collapse element
                $(".collapse").on('show.bs.collapse', function() {
                    $(this).prev(".card-header").find(".fa")
                        .removeClass("fa-plus").addClass("fa-minus");
                }).on('hide.bs.collapse', function() {
                    $(this).prev(".card-header").find(".fa")
                        .removeClass("fa-minus").addClass("fa-plus");
                });
            });
        
    
      
    
        
             
                GeeksforGeeks 
            
              
            A Computer Science Portal for Geeks
              
            
                
                    
                        
                            
                                
                                GeeksforGeeks
                                                             
                        
                    
                      
                    
                        
                            
                                GeeksforGeeks is a computer
                                science portal. It is the best
                                platform to lean programming.
                            
                        
                    
                
                  
                
                    
                        
                            
                                
                                Bootstrap
                            
                        
                    
                    
                        
                            
                                Bootstrap is a free and open-source
                                collection of tools for creating
                                websites and web applications.
                            
                        
                    
                
                
                    
                        
                            
                                
                                HTML
                                                 
                        
                    
                    
                        
                            
                                HTML stands for HyperText Markup
                                Language. It is used to design
                                web pages using markup language.
                            
                        
                    
                
            
        
    
      

  • 输出：
    

  具有渐变背景的手风琴：这是具有渐变颜色效果的简单手风琴。

  •   
    
        Bootstrap Collapse Demonstration
      
        
        
      
        
      
        
        
      
        
        
      
        
        
        
        .card-header{
            background-image: linear-gradient(to bottom, green, yellow);
        }
        .card-body{
            background-image: linear-gradient(to right, yellow, white);
        }
        
        
      
            
                
      
                     
                     GeeksforGeeks 
                    
                    A Computer Science Portal for Geeks
      
                    
                        
                            
                                
                                    GeeksforGeeks 
                                
                            
                            
                                
                                  GeeksforGeeks is a computer science portal.
                                  It is the best platform to lean programming.
                                
                            
                        
      
                        
                            
                                 
                                   Bootstrap 
                                 
                            
                            
                                
                                   Bootstrap is a free and open-source 
                                   collection of tools for creating 
                                   websites and web applications.
                                
                            
                        
      
                        
                            
                                 
                                   HTML 
                                
                            
                            
                                
                                  HTML stands for Hyper Text Markup 
                                  Language. It is used to design web 
                                  pages using markup language.
                                
                            
                        
                    
                
            
      

  • 输出：
    

  手风琴图片：在此示例中，手风琴将在其中包含图片。

• 例子：

    
  
      Bootstrap Collapse Demonstration
    
      
      
    
      
    
      
      
    
      
      
    
      
      
      
          .card{
              width:600px;
          }
          .card-body{
              width:400px;
              float: left;
          }
          .right-body{
              width:100px;
              margin:10px;
              float : right;
          }
          img{
              width:100px;
              height:100px;
          }
      
      
    
          
              
    
                   
                   GeeksforGeeks 
                  
                  A Computer Science Portal for Geeks
    
                  
                      
                          
                              
                                  GeeksforGeeks 
                              
                          
                          
                              
                                GeeksforGeeks is a computer science portal.
                                It is the best platform to lean programming.
                              
                              
                                  
                              
                          
                      
    
                      
                          
                               
                                 Bootstrap 
                               
                          
                          
                              
                                 Bootstrap is a free and open-source 
                                 collection of tools for creating 
                                 websites and web applications.
                              
                              
                                  
                              
                          
                      
    
                      
                          
                               
                                 HTML 
                              
                          
                          
                              
                                HTML stands for Hyper Text Markup 
                                Language. It is used to design web 
                                pages using markup language.
                              
                              
                                  
                              
                          
                      
                  
              
          
    

• 输出：