Open In App

Google AMP amp-accordion

Last Updated : 01 Oct, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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.




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


Example:




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


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:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads