AMP: an easy way to switch CSS class?
I'm creating an Accelerated Mobile Page (AMP) template and was wondering if there is an easy way to switch the CSS class to a tab.
I am aware of things like:
<h2
class="headline"
on="tap:list.toggleVisibility"
>
<ul id="list"></ul>
But this writes inline-styles - I'd rather toggle the custom CSS class but couldn't find an example on the AMP page.
AMP.setState
with bindings kind of <h2 [class]="myclasses">
looked like a way, but manipulating the state is pretty tricky with the tools they give you ...
source to share
This can be done with amp-bind
. You can use an implicit state variable eg. visible
to keep track of the current status. Here's an example that switches 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>
source to share
There is also an action for an item 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>
source to share