Как создать сравнительный аккордеон с помощью Google AMP amp-accordion?

Опубликовано: 12 Апреля, 2022

Иногда нам нужно отобразить много контента, и чтобы сайт выглядел красиво и коротко, мы используем складные текстовые поля. Сворачиваемые текстовые поля - это то деление, которое представляет собой комбинацию заголовка и содержимого, обычно отображается только заголовок, но при его нажатии отображается содержимое.

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>

Выход:

РЕКОМЕНДУЕМЫЕ СТАТЬИ