Interactivity in AMP introduction

These guides outline how to create interactive AMP pages. Interactivity is essential to the modern web. Building unique and delightful experiences engages users, keeping them on your site. AMP provides out-of-the box solutions to common interactivity needs while also affording highly customizable and flexible solutions.

Building interactive experiences may not feel traditional, and it's not! But that doesn’t mean it’s more difficult. Many interactive experiences are very easy to build with AMP once you’re introduced to concepts and understand the syntax.

There are several levels of interactivity in AMP. You can apply one, multiple, all, or none to an AMP page. Read the sections of this guide to learn how to build interactivity in AMP.

Interactivity foundations

This guide outlines the built-in interactivity AMP provides. It explains how to easily implement common primitives, such as hiding and showing elements.

  <h1 id="hello">Hello World!</h1>
  <button on="tap:hello.hide">Hide</button>
  <button on="tap:hello.show">Show</button>
  <button on="tap:hello.toggleVisibility">Toggle</button>

Start here to learn foundations that you can build and combine with other interactive possibilities.

Ready-made interactivity with AMP components

One of AMP’s greatest strengths is its extensive library of ready-to-go components. Many of them are interactive elements that you can customize and combine to build unique experiences!

  <amp-sidebar id="sidebar" class="sample-sidebar" layout="nodisplay" side="right">
    <h3>Sidebar</h3>
    <amp-accordion id="my-accordion" disable-session-states>
      <section>
        <h2>Section 1</h2>
        <p>Content in section 1.</p>
      </section>
      <section