AMP: easy way to toggle a CSS class?

user_388026 0
Viewed 17617

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

amp-html css
2 Answers

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