How to toggle the visibility of division using amp-bind in Google AMP?
Introduction: Sometimes you want to add custom interactivity to your AMP pages to make your pages look more user friendly and user calling. Although AMP’s pre-built components are limited, so amp-bind is made to overcome this problem. It helps the developer to add custom interactivity to the pages without using AMP’s pre-built components.
Setup: To use amp-bind in your page you have to import its script in the header of the document.
amp-bind of Google AMP is comprised of three main concepts:
- State: State variables are responsible for the update on the page on the basis of user actions. It is very important to define a state variable.
- Binding: They are a special attribute that is used to link an element’s property to a state via an expression.
Example: Dynamically hiding and showing divisions on the basis of the option selected.