Google AMP 手风琴

介绍：

有时我们有很多内容要显示，为了使网站看起来漂亮而简短，我们会使用可折叠的文本框。可折叠文本框是标题和内容组合的划分，通常只有标题可见，但当它被点击时显示内容。

设置：

• 您必须在标题中导入 amp-accordion 组件才能使用此标签。

例子：

    
        
        
      
        
        
      
        
        
        
            body {
                -webkit-animation: 
                  -amp-start 8s steps(1, end) 0s 1 normal both;
                -moz-animation: 
                  -amp-start 8s steps(1, end) 0s 1 normal both;
                -ms-animation:
                  -amp-start 8s steps(1, end) 0s 1 normal both;
                animation:
                  -amp-start 8s steps(1, end) 0s 1 normal both;
            }
            @-webkit-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-moz-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-ms-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-o-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
        
        
            
                body {
                    -webkit-animation: none;
                    -moz-animation: none;
                    -ms-animation: none;
                    animation: none;
                }
            
        
        
        
            h1,
            h4 {
                color: forestgreen;
            }
            section {
                color: crimson;
            }
  
            amp-accordion section[expanded] .show-more {
                display: none;
            }
  
            amp-accordion section:not([expanded]) .show-less {
                display: none;
            }
  
            .nested-accordion h4 {
                font-size: 20px;
                background-color: #ddd;
            }
  
            amp-accordion.hidden-header section[expanded] h4 {
                border: none;
            }
            #content-head {
                display: flex;
            }
            .fruit-title {
                width: 50%;
            }
            .comp-data {
                display: flex;
            }
            .comp-value {
                width: 50%;
                border: 1px solid;
                padding: 5px 18px;
                display: flex;
            }
  
            /* these styles are not required
          for the samples to work */
            :root {
                --space-2: 1rem;
                /* 16px */
            }
  
            amp-accordion.sample {
                margin: var(--space-2);
            }
        
        
    
    
        
        
            
                Geeks For Geeks
            
        
        
            
                Section 1 | Paragraph
                GeeksforGeeks is a Computer Science portal 
                  for geeks. It contains well written, 
                  well thought and well explained
                  computer science and programming
                  articles, quizzes etc.
            
            
                Section 2 | Description
                
                    GeeksforGeeks is a Computer Science 
                  portal for geeks. It contains well written, 
                  well thought and well explained computer 
                  science and programming articles, quizzes
                  etc. 
                    
                    GeeksforGeeks is a Computer Science
                  portal for geeks. It contains well written, 
                  well thought and well explained computer
                  science and programming articles, quizzes 
                  etc.
                
            
            
                Section 3 | Image
                
                    
                        
                      
                        
                          Images work as well.
                    
                
            
        
    

输出：

这是输出窗口…

自定义样式：

虽然它是一个非常简单的标签，但它可以根据用户的需要进行定制，因为它有许多定制选项，例如：

• 动态标题
• 隐藏标题
• 嵌套手风琴
• 自动折叠手风琴
• 动画手风琴
• 比较手风琴

通过所有这些定制，很容易制作一个漂亮的网站。

参考：

• https://amp.dev/