AMP: easy way to toggle a CSS class?

Question

I'm build an Accelerated Mobile Page (AMP) template and was wondering if there is an easy way of toggling a CSS class on tab.

I know about stuff like:

<h2 
  class="headline"
  on="tap:list.toggleVisibility"
>
<ul id="list"></ul>

But this writes inline-styles - I'd rather toggle a custom CSS class but couldn't find an example on the AMP page.

AMP.setState with bindings like <h2 [class]="myclasses"> looked like the way to go but manipulating the state is pretty hard with the tools they give you ...

Solution 1

This can be done via amp-bind. You can use an implicit state variable, e.g. visible, to track the current state. Here is a sample that toggles two classes show and hide:

  <button [text]="visible ? 'Show Less' : 'Show More'" 
           on="tap:AMP.setState({visible: !visible})">
    Show More
  </button>
  <p [class]="visible ? 'show' : 'hide'" class="hide">
    Some more content.
  </p>

Full sample on JSBIN

Solution 2

There is also an element specific action with AMP Bind toggleClass(class=STRING, force=BOOLEAN)

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

<h2 
class="headline"
on="tap:list.toggleClass(class='my-custom-class')">
<ul id="list"></ul>

Comments

[SPG]

How about we have multiple show more/less? It needs to create states for each element.

[Bachcha Singh]

@nich change the variable name visible to visible1, visible2 and more