Article Categories

Selected Reading

How to create Nested Accordion using Google AMP amp-accordion?

CSS Web Development Front End Technology

Nested accordion menus are an effective way to organize and present large amounts of information in a compact and intuitive manner. With Google Accelerated Mobile Pages (AMP), you can create fast-loading, interactive nested accordions using the amp-accordion component.

Syntax

<amp-accordion [attributes]>
  <section>
    <h2>Header</h2>
    <!-- Content or nested accordion -->
  </section>
</amp-accordion>

Accordion Attributes

Attribute	Description
`expand-single-section`	Only one section can be expanded at a time
`animate`	Adds animation when expanding/collapsing
`disable-session-states`	Disables state persistence between page loads

Required Scripts

Include these scripts in your HTML head section:
? Base AMP script: https://cdn.ampproject.org/v0.js
? Accordion component: https://cdn.ampproject.org/v0/amp-accordion-0.1.js

Example: Nested Accordion Structure

This example demonstrates how to create a nested accordion with multiple levels

<!DOCTYPE html>
<html amp>
<head>
  <meta charset="utf-8">
  <title>Nested Accordion Example</title>
  <link rel="canonical" href="/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
  <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
    .outer-accordion {
      border: 2px solid #0066cc;
      margin: 10px 0;
      border-radius: 5px;
    }
    .inner-accordion {
      border: 1px solid #ddd;
      margin: 10px;
      border-radius: 3px;
    }
    .outer-accordion h2 {
      background: #f0f8ff;
      margin: 0;
      padding: 15px;
      color: #0066cc;
    }
    .inner-accordion h3 {
      background: #f9f9f9;
      margin: 0;
      padding: 10px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Nested Accordion Demo</h1>
  
  <amp-accordion class="outer-accordion" animate>
    <section>
      <h2>Web Development</h2>
      <amp-accordion class="inner-accordion">
        <section>
          <h3>Frontend Technologies</h3>
          <p>HTML, CSS, JavaScript, React, Vue.js</p>
        </section>
        <section>
          <h3>Backend Technologies</h3>
          <p>Node.js, Python, PHP, Java, .NET</p>
        </section>
      </amp-accordion>
    </section>
    
    <section>
      <h2>Mobile Development</h2>
      <amp-accordion class="inner-accordion">
        <section>
          <h3>Native Development</h3>
          <p>iOS (Swift), Android (Kotlin/Java)</p>
        </section>
        <section>
          <h3>Cross-Platform</h3>
          <p>React Native, Flutter, Xamarin</p>
        </section>
      </amp-accordion>
    </section>
  </amp-accordion>
</body>
</html>

A nested accordion structure appears with:
- Main sections: "Web Development" and "Mobile Development"
- Each main section contains sub-accordions with technology categories
- Animated expand/collapse functionality
- Styled headers with blue outer borders and gray inner borders

Key Points

Use amp-accordion tags within existing sections to create nested levels
Each section requires a header (h2, h3, etc.) followed by content
Add animate attribute for smooth transitions
Style with CSS classes for visual hierarchy
Include proper AMP boilerplate code for validation

Conclusion

Creating nested accordions with Google AMP's amp-accordion component provides an excellent way to organize complex content hierarchically. The nested structure helps users navigate through information efficiently while maintaining fast page load times.

Aayush Mohan Sinha

Updated on: 2026-03-15T16:36:56+05:30

554 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next