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 >
<!--
Import the `amp-accordion` component in the header.
-->
< 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 >
<!-- 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:
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: