Javascript MDBootstrap 手风琴组件

MDBootstrap是一个基于 Material Design 和 bootstrap 的 Javascript UI 库，用于通过其无缝且易于使用的组件制作有吸引力的网页。它对个人和商业用途都是免费的。在本文中，我们将了解如何在 Javascript MDBootstap 中使用 Accordion 组件。

MDBootstrap Accordion 组件是一个垂直折叠元素，通过实现类和 JavaScript 插件来显示和隐藏内容。

句法：

 

   

     Accordion 1
    
      

            
 Content 
      
  

方法：

• 从官方网站下载 Javascript MDBootstrap。
• 将文件解压缩到当前工作目录。
• 在 Index.html 文件中，在 标记中指定下载的文件路径。








示例 1：这是展示如何在 MDBootstrap Javascript 中使用手风琴组件的基本示例。

HTML

  

    Javascript MDBootstrap List Group Component
    
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
    
    
        MDBootstrap Javascript Accordion Component
    
    
        
            
            
              Accordion 1
            
          
            
                 
                 MDBootstrap is a Material Design and bootstrap-based
                 Angular UI library that is used to make good looking
                 webpages with its seamless and easy-to-use
                component. It is free for both personal & commercial use
            
        
        
        
            
            
              Accordion 2
            
          
            
                 
                    MDBootstrap is a Material Design and bootstrap-based
                    Angular UI library that is used to make good looking
                    webpages with its seamless and easy-to-use
                    component. It is free for both personal & commercial use
                
            
        
        
            
            
              Accordion 3
            
          
            
                 
                    MDBootstrap is a Material Design and bootstrap-based
                    Angular UI library that is used to make good looking
                    webpages with its seamless and easy-to-use
                    component. It is free for both personal & commercial use
                
            
        
    

---

输出：

Javascript MDBootstrap 手风琴组件

示例 2：在本示例中，我们将了解如何制作一个齐平的手风琴组件，该组件在 MDBootstrap Javascript 中移除手风琴组件的侧边框。

HTML

  

    Javascript MDBootstrap List Group Component
    
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
    
    
        MDBootstrap Javascript Accordion Component
    
    
        
            
            
              Accordion 1
            
          
            
                
                    MDBootstrap is a Material Design and bootstrap-based 
                    Angular UI library that is used to make good looking 
                    webpages with its seamless and easy-to-use component. 
                    It is free for both personal & commercial use 
                
            
        
        
            
            
              Accordion 2
            
          
            
                
                    MDBootstrap is a Material Design and bootstrap-based 
                    Angular UI library that is used to make good looking 
                    webpages with its seamless and easy-to-use component. 
                    It is free for both personal & commercial use 
                
            
        
        
            
            
              Accordion 3
            
          
            
                
                    MDBootstrap is a Material Design and bootstrap-based 
                    Angular UI library that is used to make good looking 
                    webpages with its seamless and easy-to-use component. 
                    It is free for both personal & commercial use 
                
            
        
    

输出：

Javascript MDBootstrap 手风琴组件

参考： https ://mdbootstrap.com/docs/standard/components/accordion/