css实现可折叠展开手风琴文字faq面板效果代码-html代码-BFW代码库

css实现可折叠展开手风琴文字faq面板效果代码

代码语言：html

所属分类：其他

代码描述：css实现可折叠展开手风琴文字faq面板效果代码，无js代码，纯粹通过div+css实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	box-sizing: border-box;
}

fieldset {
	border: none;
	width: 600px;
	padding: 0;
	overflow: hidden;
}

fieldset > label input[type=radio] {
	display: none;
}

fieldset > label > span {
	padding: 15px 20px;
	display: block;
	cursor: pointer;
	font-weight: 900;
	text-transform: uppercase;
	background: #f1f1f1;
	border-radius: 10px;
}

fieldset > label > div {
	display: grid;
	grid-template-rows: 0fr;
	transition: all ease-in-out 300ms;
	overflow: hidden;
	padding: 10px;
}

fieldset > label input[type=radio]:checked + div {
	grid-template-rows: 1fr;
}

fieldset > label > div > p {
	overflow: hidden;
	padding: 0px;
	margin: 0px;
}
</style>

  
</head>

<body>
  <fieldset id="accordion">
    <label>
		<span>Bar 1</span>
		<input type="radio" value="bar1" name="accordion" checked>
		<div><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore impedit ducimus sequi quis voluptatem id aliquid quod distinctio, maiores iste eos fugiat aliquam minima sed? Numquam tempora, quaerat illo error deserunt ad, possi.........完整代码请登录后点击上方下载按钮下载查看