How to create Comparison accordion using Google AMP amp-accordion ?

How to create Comparison accordion using Google AMP amp-accordion ?

Last Updated : 29 Oct, 2020

Sometimes we have a lot of content to display and to make the website look pretty and short we make use of the collapsible text boxes. Collapsible text boxes 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.

HTML

<script async custom-element="amp-accordion"
    src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>

To make the compare division we will simply use the CSS to make the compare division. You can use the code mentioned below:

HTML

<style>
    #content-head {
        display: flex;
    }

    .title {
        width: 50%;
    }

    .compare-data {
        display: flex;
    }

    .compare-value {
        width: 50%;
        border: 1px solid;
        padding: 5px 18px;
        display: flex;
    }
</style>

Example:

HTML

<!doctype html>
<html amp>

<head>
    <meta charset="utf-8">
    <title>Google AMP amp-accordion</title>

    <!-- Important scripts and links 
        to be imported -->
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
    
    <script async custom-element="amp-list" 
src="https://cdn.ampproject.org/v0/amp-list-0.1.js">
    </script>
    
    <script async custom-template="amp-mustache" 
src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
    </script>
    
    <script async custom-element="amp-accordion" 
src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
    </script>
    
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-accordion/index.html">
    
    <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 CSS -->
    <style amp-custom>
        amp-accordion section[expanded] .show-more {
            display: none;
        }

        amp-accordion section:not([expanded]) .show-less {
            display: none;
        }

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

        h1,
        h4 {
            color: forestgreen;
        }

        section {
            color: crimson;
        }
    </style>
    <meta name="robots" content="noindex, nofollow">
</head>

<body>
    <center>
        <h1>
            Geeks For Geeks
        </h1>
    </center>

    <div>
        <amp-list src=
"/static/samples/json/accordion-fruit.json" 
            height="170" width="auto" 
            layout="fixed-height"
            items="." single-item id="fruitList">

            <template type="amp-mustache">
                <div id="content-head">
                    <div class="fruit-title">
                        
<p>
                            {{primaryFruit.subType}} 
                            {{primaryFruit.fruit}}
                        </p>

                        <amp-img src=
                            "{{primaryFruit.imageURL}}" 
                            width="50" height="50">
                        </amp-img>
                    </div>
                    <div class="fruit-title">
                        {{#competitorFruit}}
                        
<p>
                            {{subType}} {{fruit}}
                        </p>

                        <amp-img src="{{imageURL}}" 
                            width="50" height="50">
                        </amp-img>
                        {{/competitorFruit}}
                    </div>
                </div>
                <section>
                    <amp-accordion animate 
                        disable-session-states 
                        expand-single-section on=
                "expand:fruitList.changeToLayoutContainer;
                collapse:fruitList.changeToLayoutContainer">
                        {{#comparisonData}}{{#heading}}
                        <section [class]="'{{headingName}}'.split(' ')[0]">
                            <span>
                                <h1>{{headingName}}</h1>
                            </span>
                            <div>
                                {{#rowAndSubHeading}}
                                <h3>{{rowLabel}}</h3>
                                <div class="comp-data">
                                    {{#fruitData}}
                                    <div class="comp-value">
                                        {{colData}}
                                    </div>
                                    {{/fruitData}}
                                </div>
                                {{/rowAndSubHeading}}
                            </div>
                        </section>
                        {{/heading}}{{/comparisonData}}
                    </amp-accordion>
                </section>
            </template>
        </amp-list>
    </div>
</body>

</html>

Output:

How to create Comparison accordion using Google AMP amp-accordion ?

aditya_taparia

Improve

Article Tags :

Similar Reads

How to create Auto-collapsing accordion using Google AMP amp-accordion ?

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

How to create Animated accordion using Google AMP amp-accordion ?

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

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

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 conten

How to create Hidden Header using Google AMP amp-accordion?

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 conten

How to create Dynamic Header using Google AMP amp-accordion?

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 conten

How to Create an Accordion using CSS ?

Accordions are popular UI components used to present collapsible content sections on websites, enhancing user experience by organizing information in a compact and accessible manner. While traditionally implemented with JavaScript, a CSS-only approach offers a lightweight and efficient alternative,

How to create Inline amp-addthis in Google AMP ?

Introduction: Some times as a web developer we want to share our social media links and for that, we have to show the social media buttons and amp-addthis is made solely for this purpose. The amp-addthis component integrates the AddThis Floating Bar and Inline Share Buttons. Setup: You have to impor

How to Open Bootstrap Accordion using Anchor Element ?

In this article, we will learn how to go to anchor and open a Bootstrap accordion at the same time. This can be utilized by using JavaScript and jQuery for handling the click event. Accordion is one of the Bootstrap components. Accordion provides collapsable content sections on a webpage. The main p

Angular PrimeNG Accordion Properties for Accordion

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the Accordion Component in Angular PrimeNG. The Accordion

How to create Floating amp-addthis in Google AMP ?

Some times as a web developer we want to share our social media links and for that, we have to show the social media buttons and amp-addthis is made solely for this purpose. The amp-addthis component integrates the AddThis Floating Bar and Inline Share Buttons. Setup: You have to import amp-addthis