<!doctype html>
<
html
amp>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Google AMP amp-accordion</
title
>
<
script
async
src
=
</
script
>
<
script
async
custom-element
=
"amp-list"
</
script
>
<
script
async
custom-template
=
"amp-mustache"
</
script
>
<
script
async
custom-element
=
"amp-accordion"
</
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
>
<
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
>