<div class="container">
<h1 class="title">게시판</h1>
<div class="item">
<input type="checkbox" id="tab1">
<label for="tab1">내용 1</label>
<div class="content">
<p>본문본문본문본문본문본문</p>
</div>
</div>
<div class="item">
<input type="checkbox" id="tab2">
<label for="tab2">내용 2</label>
<div class="content">
<p>안녕하세요~~~~~~~~~~~~~</p>
</div>
</div>
<div class="item">
<input type="checkbox" id="tab3">
<label for="tab3">내용 3</label>
<div class="content">
<p>반갑습니다^^!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
</div>
</div>
</div>
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
padding: 0;
font-family: 'GmarketSansMedium', sans-serif;
}
.item {
border-bottom: 1px solid #ddd;
padding: 0.5rem;
}
input[type="checkbox"] {
display: none;
}
label {
display: block;
cursor: pointer;
font-size: 1.5rem;
}
label::after {
content: "+";
float: right;
transition: 0.2s;
font-size: 2rem;
}
input[type="checkbox"]:checked+label::after {
transform: rotate(45deg);
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s;
}
input[type="checkbox"]:checked+label+.content {
max-height: 200px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.