AMP: Building Accelerated Mobile Pages

Changing CSS class with <amp-bind>

We can also bind an element's class attribute to an expression with amp-bind. This allows us to modify an element's style by adding or removing CSS classes. A common pattern is to hide or show an element by applying an appropriate CSS class. We could achieve this with amp-bind.

First, let's set up some CSS classes to show or hide an element. We use the visibility: hidden property to hide the element; you could also use display:none here depending on your needs:

.hide {  visibility: hidden;}.show {  visibility: visible;}

Next, we set up an image. Note the binding of the property displayStatus to the class attribute, and that we have defaulted it to the show class:

 <amp-img src="..." width="600" height="400" ...