如何使用 Google AMP amp-accordion 创建比较手风琴？

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

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

为了进行比较除法，我们将简单地使用 CSS 来进行比较除法。您可以使用下面提到的代码：

HTML

例子：

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;
        }
  
        amp-accordion section:not([expanded]) .show-less {
            display: none;
        }
  
        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;
        }
  
        h1,
        h4 {
            color: forestgreen;
        }
  
        section {
            color: crimson;
        }
    
    

  

    
        
            Geeks For Geeks
        
    
  
    
        
  
            
        
    

  

输出：