How to create nested accordion using Google AMP amp-accordion?-CSS Tutorial-php.cn

How to create nested accordion using Google AMP amp-accordion?

WBOY

Release： 2023-08-29 19:13:11

forward

667 people have browsed it

如何使用 Google AMP amp-accordion 创建嵌套手风琴？

Nested accordion menus are an effective way to organize and present large amounts of information in a compact and intuitive way. As mobile devices become increasingly important in accessing the internet, it is increasingly important to optimize web pages for faster loading and improved user experience. That's where the Google Accelerated Mobile Pages (AMP) project comes in, providing a smooth and fast-loading way to create mobile-friendly web pages. In this article, we’ll explore how to create nested accordion menus using Google AMP’s amp-accordion component, giving your mobile web pages a clear and organized way to present complex information.

Google AMP

Google’s Accelerated Mobile Pages (AMP) program was launched in 2015 to enhance mobile web browsing by promoting faster, more responsive web page loading. This project provides a way to develop flexible and fast-loading web pages so that they render almost instantly on mobile devices.

AMP pages are designed to reduce the amount of data downloaded and processed by mobile devices, thereby speeding up page load times and improving the overall user experience. AMP pages are typically simplified and compressed versions of standard web pages, containing simple HTML, stripped-down CSS, and restricted JavaScript.

accordion

The accordion is a user interface element that allows users to expand and collapse sections of content on a web page. It presents information in a compact and organized manner, especially when a large amount of content needs to be displayed. Accordions usually consist of multiple content sections, each with a title. By clicking on a title, the corresponding content section can be expanded or collapsed, allowing the user to view the content or hide it. Accordions help reduce clutter and improve user experience by allowing users to easily access and view content that interests them.

grammar

<amp-accordion [id=”<accordion-id>”]
   [expand-single-section]
   [disable-session-states]
   [animate]
   [layout=”container”]
   [class=”<class-name>”]
   [style=”<style-properties>”]>
   <!—accordion sections go here 
</amp-accordion>

Copy after login

Amp-accordion tag

The

amp-accordion tag is an AMP component that allows you to create an accordion on a web page. The amp-accordion component consists of a set of expandable and collapsible sections, each with a title and content. Titles are typically clickable elements used to toggle the visibility of content sections. When the user clicks on the title, the content section expands or collapses, depending on its current state.

Let us introduce each attribute and its possible values one by one -

Id (optional) - Specifies the unique ID of the accordion component. This can be used to apply CSS styles or position components using JavaScript.
Expand-single-section (optional) − If present, only one section can be expanded at a time. When a new section is expanded, the previously expanded section will be collapsed.
Disable-session-states (optional) - If present, session states will be disabled for the component. This means that the component's state is not saved between page loads.
Animation (optional) − If present, the accordion will animate when expanding or collapsing the section.
Layout (optional)− Specifies the layout of the accordion. The default value is "container", which sets the container to a fixed width and height. Other possible values include "fixed-height" and "flex-item".
Class (optional) - Specifies one or more CSS class names to apply to the component.
Styles (optional) - Specify one or more inline CSS style properties to apply to the component.

method

To create a nested accordion using the amp-accordion component in Google AMP, you can follow the steps listed below -

Include the AMP script in of the HTML file. This can be done by adding the following line: .
Use the amp-accordion tag to define an external accordion. In an accordion, you can define multiple sections using the
tag.
Add a title and content to each section. The header should be enclosed in
tags, while the content can be any HTML tag you want to display.
To create a nested accordion, add another amp-accordion tag within the content of a section of the outer accordion.
In an inner accordion, you can define multiple sections using
tags. Each section should have a title and content, just like the sections in the external accordion.
To style an accordion, you can add custom CSS to your file. For example, you can add a border to the accordion or change the font size or color.
After setting up the accordion, users can click on the title to expand or collapse content sections. This provides a way to organize information and make it easier for users to find what they are looking for.

Example

的中文翻译为：

示例

以下HTML代码旨在使用Google AMP amp-accordion创建嵌套手风琴。代码包括两个amp-accordion元素，一个在另一个内部，以创建嵌套手风琴结构。外部手风琴和内部手风琴类用于为手风琴添加边框和边距样式。使用section、h2、h3和p标签添加手风琴的内容。当用户点击手风琴标题时，根据Google AMP amp-accordion的功能，内容会展开或折叠。

<!DOCTYPE html>
<html>
<head>
   <title>How to create Nested Accordion using Google AMP amp-accordion?</title>
   <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-custom>
      .outer-accordion {
         border: 1px solid #ccc;
         margin: 10px 0;
      }
      .inner-accordion {
         border: 1px solid #eee;
         margin: 10px 0;
      }
   </style>
</head>
<body>
   <h4>How to create Nested Accordion using Google AMP amp-accordion?</h4>
   <amp-accordion class="outer-accordion">
      <section>
         <h2>Outer Section 1</h2>
         <amp-accordion class="inner-accordion">
            <section>
               <h3>Inner Section 1</h3>
               <p>Content for inner section 1.</p>
            </section>
            <section>
               <h3>Inner Section 2</h3>
               <p>Content for inner section 2.</p>
            </section>
         </amp-accordion>
      </section>
      <section>
         <h2>Outer Section 2</h2>
         <p>Content for outer section 2.</p>
      </section>
   </amp-accordion>
</body>
</html>