amp-html - AMP: amp-list で CSS クラスを切り替えますか?

Question

こんにちは、amp-list のコンテンツを切り替えたいので、次の投稿の指示に従いました: AMP: easy way to toggle a CSS class? 、それは正常に動作します。

問題は、私が "amp-list" にいて、すべてのリスト コンテンツではなく、クリックした特定のコンテンツのみを開きたいことです。

これはコードです：

    <amp-list width="auto" height="1500" layout="fixed-height" src="/SRC/json/box.json" class="m1">
      <template type="amp-mustache" id="amp-template-id">
        <section>
          <h1 tabindex="1" role="tab" on="tap:collapsed.toggleVisibility">
            <!--box1-->
            <div class="box"> 
              <span class="title">
                <span>{{title}}</span> |
                <span>{{title2}}</span>
              </span>                       
            </div
            <!--end box1-->
            <button [text]="visible ? 'Show Less' : 'Show More'" on="tap:AMP.setState({ visible: !visible})">Show More</button>
          </h1>
          <div  [class]="visible ? 'show' : 'hide'" class="hide collapsed" id="{{item}}">
            <div class="content">
              <div class="desc">text text text</div>                     
            </div>
          </div>
        </section>
      </template>
    </amp-list>

あなたはそれを行う方法を知っていますか？ありがとう