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 content is displayed.
Setup:
- You have to import amp-accordion component in your header to use this tag.
< script async custom-element = "amp-accordion" src = "https://cdn.ampproject.org/v0/amp-accordion-0.1.js" > </ 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 = "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 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 > Beginner For Beginner </ h1 > </ center > < amp-accordion class = "sample" > < section expanded> < h4 >Section 1 | Paragraph</ h4 > < p >w3wiki is a Computer Science portal for Beginner. 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 > w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. < br /> < br /> w3wiki is a Computer Science portal for Beginner. 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 = "https://pbs.twimg.com/profile_images/1138375574726955008/1fNUyEdv.png" 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:
- https://amp.dev/
Contact Us