AMP
  • websites

Dynamic Accordion

Introduction

This code snippet shows how you can dynamically update data in amp-accordionsections using amp-bind and amp-list.

Setup

Import the amp-accordion component to display content in accordion.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

Import the amp-bind component to update accordion state based on user input.

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Import the amp-list component to dynamically display the names of hot or cold countries.

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

Import the amp-mustache component to dynamically display items from amp-list.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

Implementation

The input section sets amp-state as {climate: 1} if 'Hot' is selected and {climate: 2} if 'Cold' is selected. The amp-accordion is hidden by default, but displayed if climate != 0 (so either hot or cold must be selected).

<input type="radio"
  id="f-option1"
  name="selector1"
  role="button"
  tabindex="0"
  on="change:AMP.setState({climate:(event.checked) ? 1 : 0})">
<label for="f-option1">Warm</label>
<input type="radio"
  id="f-option2"
  name="selector1"
  on="change:AMP.setState({climate: (event.checked) ? 2 : 0})"
  role="button"
  tabindex="0">
<label for="f-option2">Cold</label>

Accordion

Each amp-accordion section is a different continent, therefore the climateCountries data also must be filtered by continent. This filtering is done in the [src] section of amp-list. Additionally, height is dynamically set based on number of items in filtered state.

The src for climateCountries is dynamic based on user input. If {climate == 1} then climateCountries data is pulled from the hot.json file. Else, if {climate == 2} then climateCountries data is pulled from the cold.json file

<div id="accordion"
  [hidden]="climate == 0"
  hidden>
  <p>The accordion below lists countries, organized by continent, that match the climate you chose. </p>
  <amp-state id="climateCountries"
    [src]="climate == 1 ? '/static/samples/json/hot.json': climate == 2 ? '/static/samples/json/cold.json': ''">
  </amp-state>
  <amp-accordion>
    <section>
      <h4>
        Asia
      </h4>
      <amp-list layout="fixed-height"
        height="0"
        binding="refresh"
        [src]="climateCountries.countries.filter(country => country.continent == 'Asia')"
        [is-layout-container]="true">
        <template type="amp-mustache">
          <ul>
            <span>{{Name}}</span>
          </ul>
        </template>
      </amp-list>
    </section>
    <section>
      <h4>
        Europe
      </h4>
      <amp-list layout="fixed-height"
        height="0"
        binding="refresh"
        [src]="climateCountries.countries.filter(country => country.continent == 'Europe')"
        [is-layout-container]="true">
        <template type="amp-mustache">
          <ul>
            <span>{{Name}}</span>
          </ul>
        </template>
      </amp-list>
    </section>
    <section>
      <h4>
        South America
      </h4>
      <amp-list layout="fixed-height"
        height="0"
        binding="refresh"
        [src]="climateCountries.countries.filter(country => country.continent == 'South America')"
        [is-layout-container]="true">
        <template type="amp-mustache">
          <ul>
            <span>{{Name}}</span>
          </ul>
        </template>
      </amp-list>
    </section>
    <section>
      <h4>
        North America
      </h4>
      <amp-list layout="fixed-height"
        height="0"
        binding="refresh"
        [src]="climateCountries.countries.filter(country => country.continent == 'North America')"
        [is-layout-container]="true">
        <template type="amp-mustache">
          <ul>
            <span>{{Name}}</span>
          </ul>
        </template>
      </amp-list>
    </section>
  </amp-accordion>
</div>
需要进一步说明?

如果此页面的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。

前往 Stack Overflow
一项无法解释的功能?

AMP 项目强烈鼓励您参与其中并作出贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您对热衷问题做出单次贡献。

在 GitHub 上编辑实例