Accordions
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Lapus's modular elements
at the
Element Index Page →
Button Style — Multiple Open
The default behaviour for the accordion is to allow users to open multiple panes by clicking on the title. Panes are closed by clicking again on the title.
<ul class="accordion accordion-1"> <li class="active"> <div class="accordion__title"> <span class="h5">Panel One</span> </div> <div class="accordion__content"> Content </div> </li> <li> <div class="accordion__title"> <span class="h5">Panel Two</span> </div> <div class="accordion__content"> Content </div> </li> </ul>
-
代码质量
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
视觉设计
Lapus提供干净而现代的产品，适合公司，科技初创公司，市场营销等各种运用场景的数字化解决方案。 设计组件的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
用户体验
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。
Minimal Style — Multiple Open
The default behaviour for the accordion is to allow users to open multiple panes by clicking on the title. Panes are closed by clicking again on the title.
<ul class="accordion accordion-1"> <li class="active"> <div class="accordion__title"> <span class="h5">Panel One</span> </div> <div class="accordion__content"> Content </div> </li> <li> <div class="accordion__title"> <span class="h5">Panel Two</span> </div> <div class="accordion__content"> Content </div> </li> </ul>
-
代码质量
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
视觉设计
Lapus提供干净而现代的产品，适合公司，科技初创公司，市场营销等各种运用场景的数字化解决方案。 设计组件的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
用户体验
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。
Button Style — One Open
Allows only one panel to remain active at any time. Clicking a new panel automatically closes the previously active panel. This is achieved using the .accordion--one-open class.
<ul class="accordion accordion-1 accordion--oneopen"> <li class="active"> <div class="accordion__title"> <span class="h5">Panel One</span> </div> <div class="accordion__content"> Content </div> </li> <li> <div class="accordion__title"> <span class="h5">Panel Two</span> </div> <div class="accordion__content"> Content </div> </li> </ul>
-
代码质量
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
视觉设计
Lapus提供干净而现代的产品，适合公司，科技初创公司，市场营销等各种运用场景的数字化解决方案。 设计组件的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
用户体验
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。
Minimal Style — One Open
Allows only one panel to remain active at any time. Clicking a new panel automatically closes the previously active panel. This is achieved using the .accordion--one-open class.
<ul class="accordion accordion-2 accordion--oneopen"> <li class="active"> <div class="accordion__title"> <span class="h5">Panel One</span> </div> <div class="accordion__content"> Content </div> </li> <li> <div class="accordion__title"> <span class="h5">Panel Two</span> </div> <div class="accordion__content"> Content </div> </li> </ul>
-
代码质量
Lapus遵循BEM命名约定，该约定着重于HTML和CSS都反映的逻辑代码可读性。 诸如手风琴和制表符之类的交互组件遵循相同的标记模式，从而使开发人员和初学者都更容易进行快速开发。
加上详细的介绍文档，其中包括代码突出显示，摘要，类定制程序说明，您将获得一个强大的工具包。
-
视觉设计
Lapus提供干净而现代的产品，适合公司，科技初创公司，市场营销等各种运用场景的数字化解决方案。 设计组件的目的是以多种多样但一致的方式展示内容。
多种字体和配色方案选项，只需单击几下即可改变网站的外观 — 在随附的网页构建器中自定义您的网站使对样式和内容安排的试验变得非常简单。
-
用户体验
Lapus以提供高质量和高价值的产品而闻名，并提供了及时而体贴的支持。超过20,000名客户的信赖。