기초공사 (html,css,javascript)
아코디온 만들기 본문
html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - javascript_06_accordion_FINAL</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<button id="btn-collapse">Collapse All</button>
<h2>FAQ</h2>
<section id="faq">
<!-- 제목을 클릭하면 그제목 부모에게 가서 active를 넣어주고 부모에게 active가 있따면 패널의 바디가 나오게
Collapse All 버튼을 누르면 접히게..오늘의 할일-->
<div class="panel-question active">
<div class="panel-heading">
+ Lorem ipsum dolor sit?
</div>
<div class="panel-body" id="thisone">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae quo magni soluta minima corporis! Soluta, ipsa et.</p>
<p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
</div>
</div>
<div class="panel-question">
<div class="panel-heading">
+ Lorem ipsum dolor sit?
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae quo magni soluta minima corporis! Soluta, ipsa et.</p>
<p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
</div>
</div>
<div class="panel-question">
<div class="panel-heading">
+ Lorem ipsum dolor sit?j
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad aliquid voluptate fugit quaerat non molestiae quo magni soluta minima corporis! Soluta, ipsa et.</p>
<p>Quos quibusdam, nesciunt totam ullam quasi neque!</p>
</div>
</div>
</section>
</div>
<!-- partial -->
<script src = script.js></script>
</body>
</html>