如何使用 Google AMP amp-accordion 创建动画手风琴？

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

设置：

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

要制作动画手风琴，请使用下面提到的代码。 animate 属性会减慢文本框的折叠和展开速度，使其看起来具有动画效果。

例子：

HTML

  

    
    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
            }
        
    
  
    
        amp-accordion section[expanded] .show-more {
            display: none;
        }
  
        /* These styles are not required for 
            the samples to work */
        :root {
            --space-2: 1rem;
        }
  
        amp-accordion.sample {
            margin: var(--space-2);
        }
  
        h1,
        h4 {
            color: green;
        }
  
        h1 {
            text-align: center;
        }
  
        section {
            color: crimson;
        }
    
    

  

    
        Geeks For Geeks
    
      
    
        
            Section 1
  
              

                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
              
              

                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
              
              

                GeeksforGeeks is a Computer Science 
                portal for geeks. It contains well 
                written, well thought and well explained
                computer science and programming 
                articles, quizzes etc.
            
  
        
    

  

输出：