css 构建手风琴组件(accordion component)

手风琴组件是下面这样的组件：

多用于FAQ，只显示标题，内容默认隐藏，只有点击才会出现。

用CSS实现下面的组件，当然，点击隐藏/显示的功能要使用 JavaScript 才能实现，这部分先不考虑。

如下的css，使用了 flex, grid, 然后使用一个名称为open的class 控制 content 的隐藏与显示，添加则显示，删除则隐藏。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Accordion Component</title><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><linkhref="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"rel="stylesheet"/><style>/*SPACING SYSTEM (px)2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128FONT SIZE SYSTEM (px)10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98Main color: #087f5b Tint1: #099268;Grey: #343a40footer-color: #495057;*/* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: "Inter", sans-serif;color: #343a40;line-height: 1;}.accordion {width: 700px;margin: 100px auto;display: flex;flex-direction: column;gap: 20px;}.item {box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);padding: 24px;display: grid;grid-template-columns: auto 1fr auto;column-gap: 24px;row-gap: 32px;align-items: center;}.number,.text {font-size: 24px;font-weight: 500px;/* color: #087f5b; */}.number {color: #ced4da;}.icon {width: 24px;height: 24px;stroke: #087f5b;}.hidden-box {grid-column: 2;display: none;/* grid-row: 2/3; */}/* OPEN STATE */.open {border-top: 4px solid #087f5b;}.open .hidden-box {display: block;}.open .number,.open .text {color: #087f5b;}.hidden-box p {line-height: 1.6;margin-bottom: 24px;}.hidden-box ul {color: #868e96;margin-left: 20px;display: flex;flex-direction: column;gap: 20px;}</style></head><body><div class="accordion"><div class="item"><p class="number">01</p><p class="text">Where are these chairs assembled?</p><svgxmlns="http://www.w3.org/2000/svg"class="icon"fill="none"viewBox="0 0 24 24"stroke="currentColor"><pathstroke-linecap="round"stroke-linejoin="round"stroke-width="2"d="M19 9l-7 7-7-7"/></svg><div class="hidden-box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantiumreprehenderit sapiente voluptatum doloribus nostrum! Quispraesentium maxime sequi in accusantium</p><ul><li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. s</li><li>Ex eius tempora unt vel nemo dolorum? Et maxime autem totam est,</li><li>expedita dignissimos fugiat voluptate deleniti a repellat,</li><li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe</li></ul></div></div><div class="item open"><p class="number">02</p><p class="text">How long do I have to return my chair?</p><svgxmlns="http://www.w3.org/2000/svg"class="icon"fill="none"viewBox="0 0 24 24"stroke="currentColor"><pathstroke-linecap="round"stroke-linejoin="round"stroke-width="2"d="M19 9l-7 7-7-7"/></svg><div class="hidden-box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantiumreprehenderit sapiente voluptatum doloribus nostrum! Quispraesentium maxime sequi in accusantium</p><ul><li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. s</li><li>Ex eius tempora unt vel nemo dolorum? Et maxime autem totam est,</li><li>expedita dignissimos fugiat voluptate deleniti a repellat,</li><li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe</li></ul></div></div><div class="item"><p class="number">03</p><p class="text">Do you ship to countries outside the EU?</p><svgxmlns="http://www.w3.org/2000/svg"class="icon"fill="none"viewBox="0 0 24 24"stroke="currentColor"><pathstroke-linecap="round"stroke-linejoin="round"stroke-width="2"d="M19 9l-7 7-7-7"/></svg><div class="hidden-box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantiumreprehenderit sapiente voluptatum doloribus nostrum! Quispraesentium maxime sequi in accusantium</p><ul><li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. s</li><li>Ex eius tempora unt vel nemo dolorum? Et maxime autem totam est,</li><li>expedita dignissimos fugiat voluptate deleniti a repellat,</li><li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe</li></ul></div></div></div></body>
</html>

css 构建手风琴组件(accordion component)相关推荐

jQuery easyUI布局（Layout）与手风琴（Accordion）
上期讲了easyUI最重要的组件:面板,这期讲讲布局和手风琴运用jQuery easyUI是需要引用文件的,详见上一期布局(layout) 效果图如下: 我们从上图可以看到,整个布局分为五个部分, ...
vue手风琴组件_Vue 2的Badger手风琴组件
vue手风琴组件 Vue-Badger手风琴 (vue-badger-accordion) Badger-Accordion Component for Vue 2.0. Vue 2.0的Badge- ...
[译] JavaScript 中的 CSS：基于组件的样式的未来
本文讲的是[译] JavaScript 中的 CSS:基于组件的样式的未来, 原文地址:CSS in JavaScript: The future of component-based styling ...
纯css实现手风琴效果_创建纯CSS手风琴的4种方法
内容手风琴是一种有用的设计模式. 您可以将它们用于许多不同的事物:用于菜单,列表,图像,文章摘录,文本片段甚至视频那里的大多数手风琴都依赖JavaScript,主要是jQuery ,但是由于高级CS ...
P6-Vue3后台管理系统-构建业务组件连通公共组件
P6-Vue3后台管理系统-构建业务组件连通公共组件 1.概述这篇文章我们将创建业务模块,并且与公共组件进行连通. 2.构建业务模块 2.1.构建Home 2.2.构建VideoManage 2.3 ...
tailwind css_如何使用Tailwind CSS构建样式化的登陆页面
tailwind css 介绍 (Introduction) Developers use Cascading Style Sheets (CSS) to style websites. But of ...
html avatar属性,CSS自定义属性在组件开发中的使用
在图解CSS系列的<CSS自定义属性>一文中,对CSS的自定义属性做过深入的阐述.如果你阅读过这篇文章,应该对CSS自定义属性有所了解,也能体会到该特性的强大之处.今天,CSS自定义属性可 ...
vue 构建根组件_构建迷你图Vue组件
vue 构建根组件 Sparklines can be used to quickly visualize data variance. They are small and intuitive to ...
[JS,CSS] - CSS圆角框组件
来源:http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html 下载地址:http://files.cnblogs.com/biny ...

css 构建手风琴组件(accordion component)

css 构建手风琴组件(accordion component)相关推荐

最新文章

热门文章