Проверен ли селектороподобный на ампер-гармошку?

Question

Мне было интересно, есть ли способ стилизовать, отобразить / скрыть элемент вне аккордеона, основанный на состоянии этого аккордеона, то есть свернутый или расширенный.

Я вижу, что вы можете стилизовать контент внутри самого аккордеона на основе состояния, но не нашли возможности сказать: если эта аккордеонная заготовка развернута, скройте это изображение здесь и т. Д.

Answer 1

Это возможно, слушая expand а также collapse мероприятие:

<amp-accordion>
    <section on="expand:myElement.show;
                 collapse:myElement.hide">
    ...

При срабатывании любого из этих событий вы можете запустить любое из встроенных действий AMP, например: toggle (показать / скрыть) или toggleClass,

Вот полный пример:

  <amp-accordion>
    <section on="expand:myElement.show;
                 collapse:myElement.hide">
      <h2>
        Toggle Visibility
      </h2>
      <div>
        Content 1
      </div>
    </section>
    <section on="expand:myOtherElement.toggleClass(class='red');
                 collapse:myOtherElement.toggleClass(class='red')">
      <h2>
        Toggle Class
      </h2>
      <div>
        Content 2
      </div>
    </section>
  </amp-accordion>

  <div id="myElement" hidden>
    Element 1
  </div>
  <div id="myOtherElement">
    Element 2
  </div>