Some AMP Shortcodes To Make Some Elements Easier

It turns out that in AMP there are some standard action codes or shortcodes to make it easier to give certain commands to an element such as redirect, print, show, hide, toggle, scroll to, and focus on input.

With these commands we do not need an AMP plugin to perform its function.

The commands are as below.

AMP.navigateTo ()

 <button on="tap:AMP.navigateTo(url='http://google.com')">google.com</button>

AMP.print ()

 <button on="tap:AMP.print">Print</button>

Show, Hide, Toggle Visibility

 <button on="tap:normal-element.show">Show</button>
<button on="tap:normal-element.hide">Hide</button>
<button on="tap:normal-element.toggleVisibility">Toggle Visibility</button>

<div id="normal-element" hidden>
  I was initially hidden.
</div>

Scroll To

   <button on="tap:normal-element2.scrollTo">ScrollTo</button>
  <button on="tap:normal-element2.scrollTo('position' = 'bottom')">ScrollTo Bottom</button>
  <button on="tap:normal-element2.scrollTo('position' = 'center')">ScrollTo Center</button>
  <button on="tap:normal-element2.scrollTo('duration' = 5000)">ScrollTo Slowly</button>

<div id="normal-element2">
  You have to scroll to see me.
</div>

Focus

 <button on="tap:input-element.focus">Focus</button>

Combining Commands

 <button on="tap:normal-element2.scrollTo('position' = 'center'), input-element.focus">ScrollTo and Focus</button>

Please use as needed ...

Above is an example in HTML code and you can modify a button with your own CSS code.