如何使用 Google AMP amp-accordion 创建动态标题？

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

设置：

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

• 为了制作动态标题，我们使用下面提到的CSS 代码。每当分区展开或折叠时，此代码将动态更改标题的内容。

amp-accordion section[expanded] .show-more {
  display: none;
}
  
amp-accordion section:not([expanded]) .show-less {
  display: none;
}

例子：

  
   
  
  
  
  
  
  
  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
    }
  

    
GeeksForGeeks | amp-accordion

    h1, h4{
      color: forestgreen;
    }
      section {
        color: crimson;
      }
    
    amp-accordion section[expanded] .show-more {
      display: none;
    }
  
    amp-accordion section:not([expanded]) .show-less {
      display: none;
    }
  
    /* 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
  
  
    
      
             Click it Geek!!
           
          
             Welcome to GeeksForGeeks
          
      GeeksforGeeks is a Computer Science portal for geeks. 
         It contains well written, well thought and well explained 
         computer science and programming articles, quizzes etc. 
    
  

输出：