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).

Warm Cold

<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>

Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow

Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub

Written by @elisameyer