Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a Hidden Header using Google AMP Amp-Accordion?
Google AMP (Accelerated Mobile Pages) is an open−source framework designed to create fast−loading and mobile−friendly web pages, while amp−accordion is a component in the AMP library that allows for collapsible content sections on a web page. Google offers the Accelerated Mobile Pages (AMP) framework allowing you to make hidden content that the user can toggle open and closed.
Algorithm
Declare a new HTML5 document using the declaration at the beginning of the file.
Inside the element, add the ⚡ attribute to indicate that this is an AMP HTML document.
Inside the element, add the meta element with the charset attribute set to "utf−8".
Set the document title using the title element.
Add a link element with the rel attribute set to "canonical" and the href attribute set to the canonical URL of the document.
Add a meta element with the name attribute set to "viewport", and the content attribute set to "width=device−width,minimum−scale=1,initial−scale=1". This sets the viewport width to the width of the device and sets the initial scale to 1.
Add a script element with the src attribute set to "https://cdn.ampproject.org/v0.js" to reference the AMP JavaScript library. Use the async attribute to load the script asynchronously.
Add a style element with the amp−custom attribute to define custom CSS styles for the document. This is where you would add any custom styles that you want to use with AMP.
Inside the element, add the visible content of the document.
Use the <amp−accordian> element to create an accordion. Add one or more <section> elements inside the <amp−accordian> element. Each <section> should include a header (<h2>) and content (<div>).
Save the document with a .html file extension and open it in a web browser to view the results.
Example
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>AMP accordion</title>
<link rel="canonical" href="self.html">
<meta name="viewport" content="width=device-width">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<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>
/* Custom css */
</style>
</head>
<body>
<div class="container">
<amp-accordion class="myaccordion">
<section expanded>
<h3>Header</h3>
<div class="content">
Welcome to Tutorialspoint.
</div>
</section>
<section>
<h3>Header 2</h3>
<div class="content">
<a href="https://www.tutorialspoint.com/index.htm">Go to Tutorialspoint</a>
</div>
</section>
</amp-accordion>
</div>
</body>
</html>
We have added the required AMP boilerplate code, a header for our page, and an amp−accordion component with one section in the HTML markup shown above. A header and a div with our hidden text are present in the section.
CSS Code
We can add some custom CSS styles to the elements inside the section to make our hidden header appear nice.
Example
body {background: #f2f2f2;font-family: Arial, Helvetica, sans-serif;}
.container {max-width: 700px; margin: 0 auto;}
.myaccordion {background: #ffffff;margin: 30px;}
.myaccordion section h3 {padding: 1rem;background: #fbfbfb;font-size: .9rem;}
.myaccordion section .content {padding: 1rem;}
Conclusion
On your mobile web pages, using the Google AMP amp−accordion component is a fantastic method to add a hidden header. You can make a completely functional hidden header that the user can toggle open and closed by following the instructions in this article. By including your own CSS styles, you can further alter the appearance and feel of your concealed header. Overall, the Google AMP framework offers a wide range of potent elements that can assist you in building quick, responsive, and interesting mobile websites.
47 Views
