Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a Hidden Header using Google AMP Amp-Accordion?

Front End Technology HTML Web Development

Google AMP (Accelerated Mobile Pages) is an open-source framework designed to create fast-loading and mobile-friendly web pages. The amp-accordion component allows you to create collapsible content sections where users can toggle visibility of content by clicking on headers, making it perfect for creating hidden header functionality.

The amp-accordion component is particularly useful for creating FAQ sections, collapsible menus, or any content that needs to be initially hidden but easily accessible. Each accordion section consists of a header (typically an <h2> or <h3> element) and content that can be expanded or collapsed.

Syntax

Following is the basic syntax for creating an amp-accordion with hidden headers 

<amp-accordion>
  <section>
    <h3>Header Title</h3>
    <div>Hidden content goes here</div>
  </section>
</amp-accordion>

The expanded attribute can be added to a section to make it initially visible, while sections without this attribute remain collapsed by default.

Required AMP Setup

To use amp-accordion, you need to include the following components in your AMP document 

<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>

The first script loads the main AMP library, while the second script specifically loads the amp-accordion component functionality.

Creating Hidden Headers with Amp-Accordion

Example Basic Hidden Header Implementation

Following example demonstrates how to create hidden headers using amp-accordion 

<!DOCTYPE html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <title>AMP Hidden Header with Accordion</title>
    <link rel="canonical" href="self.html">
    <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>
        body { 
            background: #f5f5f5; 
            font-family: Arial, sans-serif; 
            padding: 20px;
        }
        .container { 
            max-width: 700px; 
            margin: 0 auto; 
        }
        amp-accordion { 
            background: #ffffff; 
            border-radius: 8px; 
            overflow: hidden; 
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        amp-accordion section h3 { 
            padding: 15px 20px; 
            margin: 0;
            background: #4a90e2; 
            color: white;
            font-size: 16px;
            cursor: pointer;
            border-bottom: 1px solid #ddd;
        }
        amp-accordion section[expanded] h3 {
            background: #357abd;
        }
        amp-accordion section .content { 
            padding: 20px; 
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Hidden Header Demo</h1>
        <amp-accordion>
            <section expanded>
                <h3>Welcome Section</h3>
                <div class="content">
                    Welcome to TutorialsPoint! This section is expanded by default.
                </div>
            </section>
            <section>
                <h3>About Our Courses</h3>
                <div class="content">
                    We offer comprehensive tutorials on web development, programming languages, and more.
                </div>
            </section>
            <section>
                <h3>Contact Information</h3>
                <div class="content">
                    <p>Visit us at: <a href="https://www.tutorialspoint.com">TutorialsPoint</a></p>
                    <p>Email: support@tutorialspoint.com</p>
                </div>
            </section>
        </amp-accordion>
    </div>
</body>
</html>

The output displays an accordion interface where clicking on headers reveals or hides the corresponding content sections. The first section is expanded by default due to the expanded attribute 

Hidden Header Demo

[Welcome Section] ?        (blue background, expanded)
Welcome to TutorialsPoint! This section is expanded by default.

[About Our Courses] ?      (clickable header, collapsed)

[Contact Information] ?    (clickable header, collapsed)

Advanced Styling for Hidden Headers

Example Enhanced Visual Design

Following example shows more advanced styling options for creating visually appealing hidden headers 

<!DOCTYPE html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <title>Enhanced AMP Accordion Headers</title>
    <link rel="canonical" href="self.html">
    <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>
        body { 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
            font-family: 'Arial', sans-serif; 
            padding: 20px;
            margin: 0;
        }
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
        }
        h1 {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }
        amp-accordion { 
            background: transparent;
        }
        amp-accordion section { 
            margin-bottom: 10px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        amp-accordion section h3 { 
            padding: 18px 25px; 
            margin: 0;
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            position: relative;
            transition: background-color 0.3s ease;
        }
        amp-accordion section h3:hover {
            background: rgba(255, 255, 255, 1);
        }
        amp-accordion section[expanded] h3 {
            background: #4CAF50;
            color: white;
        }
        amp-accordion section .content { 
            padding: 25px; 
            background: #fff;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>FAQ - Frequently Asked Questions</h1>
        <amp-accordion>
            <section>
                <h3>What is Google AMP?</h3>
                <div class="content">
                    Google AMP (Accelerated Mobile Pages) is an open-source framework that enables the creation of fast-loading mobile web pages with improved performance and user experience.
                </div>
            </section>
            <section>
                <h3>How does amp-accordion work?</h3>
                <div class="content">
                    The amp-accordion component creates collapsible sections where content is hidden by default and can be revealed by clicking on the header. This helps save space and organize content effectively.
                </div>
            </section>
            <section expanded>
                <h3>Can I customize the accordion appearance?</h3>
                <div class="content">
                    Yes! You can customize the accordion using CSS within the <code>amp-custom</code> style block. You can change colors, fonts, spacing, transitions, and more to match your design.
                </div>
            </section>
        </amp-accordion>
    </div>
</body>
</html>

This enhanced version features gradient backgrounds, hover effects, and improved visual hierarchy. The expanded section has a distinct green background to indicate its active state.

Accordion Attributes and Options

The amp-accordion component supports several useful attributes

Attribute Description
expanded Applied to a section to make it initially expanded
expand-single-section Only allows one section to be expanded at a time
disable-session-states Prevents AMP from remembering expanded states across page visits
animate Enables smooth expand/collapse animations

Example Single Section Expansion

Following example demonstrates an accordion where only one section can be expanded at a time 

<!DOCTYPE html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <title>Single Expand Accordion</title>
    <link rel="canonical" href="self.html">
    <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
Updated on: 2026-03-16T21:38:54+05:30

201 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements