Skip to content
Related Articles

Related Articles

Google AMP amp-accordion
  • Last Updated : 01 Oct, 2020

Introduction:

Sometimes we have a lot of content to display and to make the website look pretty and short we make use of the collapsible textboxes. Collapsible textboxes are that division which is the combination of heading and content, generally only heading is visible but when it is hit the content is displayed.

Setup:

  • You have to import amp-accordion component in your header to use this tag.
filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-accordion" 
</script>

chevron_right


Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html ⚡>
    <head>
        <meta charset="utf-8" />
        <script async src="https://cdn.ampproject.org/v0.js">
      </script>
        <!--
    Import the `amp-accordion` component in the header.
  -->
        <script async custom-element="amp-accordion" 
                src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
      </script>
        <link rel="canonical" 
              href=
        <meta
            name="viewport"
            content="width=device-width, 
                       minimum-scale=1,
                       initial-scale=1"
        />
        <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>
        <!-- Custom Styling -->
        <style amp-custom>
            h1,
            h4 {
                color: forestgreen;
            }
            section {
                color: crimson;
            }
  
            amp-accordion section[expanded] .show-more {
                display: none;
            }
  
            amp-accordion section:not([expanded]) .show-less {
                display: none;
            }
  
            .nested-accordion h4 {
                font-size: 20px;
                background-color: #ddd;
            }
  
            amp-accordion.hidden-header section[expanded] h4 {
                border: none;
            }
            #content-head {
                display: flex;
            }
            .fruit-title {
                width: 50%;
            }
            .comp-data {
                display: flex;
            }
            .comp-value {
                width: 50%;
                border: 1px solid;
                padding: 5px 18px;
                display: flex;
            }
  
            /* these styles are not required
          for the samples to work */
            :root {
                --space-2: 1rem;
                /* 16px */
            }
  
            amp-accordion.sample {
                margin: var(--space-2);
            }
        </style>
        <meta name="robots" content="noindex, nofollow" />
    </head>
    <body>
        <!-- Body of the Page -->
        <center>
            <h1>
                Geeks For Geeks
            </h1>
        </center>
        <amp-accordion class="sample">
            <section expanded>
                <h4>Section 1 | Paragraph</h4>
                <p>GeeksforGeeks is a Computer Science portal 
                  for geeks. It contains well written, 
                  well thought and well explained
                  computer science and programming
                  articles, quizzes etc.</p>
            </section>
            <section>
                <h4>Section 2 | Description</h4>
                <p>
                    GeeksforGeeks is a Computer Science 
                  portal for geeks. It contains well written, 
                  well thought and well explained computer 
                  science and programming articles, quizzes
                  etc. <br />
                    <br />
                    GeeksforGeeks is a Computer Science
                  portal for geeks. It contains well written, 
                  well thought and well explained computer
                  science and programming articles, quizzes 
                  etc.
                </p>
            </section>
            <section>
                <h4>Section 3 | Image</h4>
                <figure>
                    <center>
                        <amp-img src=
                                 width="200px" 
                                 height="200px">
                      </amp-img>
                        <figcaption>
                          Images work as well.</figcaption>
                    </center>
                </figure>
            </section>
        </amp-accordion>
    </body>
</html>

chevron_right


Output:

This is the output window…

Custom styling:

Although it is a very simple tag it can be customised as per user needs as it has many customisation options like:

  • Dynamic header
  • Hidden header
  • Nested Accordion
  • Auto-collapsing accordion
  • Animated accordion
  • Comparison accordion

Through all this customising it is very easy to make a beautiful website.

References:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :