如何使用 Google AMP amp-accordion 创建隐藏标题？

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

设置：

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

• 要实现隐藏标题样式，请使用下面提到的代码：

例子：

  
  GeeksForGeeks | 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.hidden-header section[expanded] h4 {
      border: none;
    }
  
    /* these styles are not required for the samples to work */
    :root {
      --space-2: 1rem;
      /* 16px */
    }
  
    amp-accordion.sample {
      margin: var(--space-2);
    }
  
    h1, h4{
      color: forestgreen;
    }
    section {
      color: crimson;
    }




  
    Geeks For Geeks
  
  
    
      Click it Geek!!
      GeeksforGeeks is a Computer Science portal for geeks. 
It contains well written, well thought and well explained 
computer science and programming articles, quizzes etc.
    
  

输出：