[ HTML ] 아코디언 메뉴 클릭했을때 닫히게 하는방법?
조회수 1581회
지금 밑의 소스는 처음메뉴 클릭하고 다음메뉴 클릭했을때 처음메뉴와 다음메뉴가 둘다 열립니다.
아코디언 메뉴 [1][2][3]......[복수개] 가 있을 때 첫번째 메뉴 클릭하면 열리고 그상태에서 다음 메뉴 클릭하게 되면 처음 메뉴가 닫히면서 다음 메뉴가 열리게 하려면 밑에 소스에서 어떻게 내용을 추가해야할지 도움 부탁드립니다.
<style>
.accordion {
font-family:Arial, Helvetica, sans-serif;
margin:0 auto;
font-size:14px;
border:1px solid #542437;
border-radius:10px;
width:600px;
padding:10px;
background:#fff;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
display:block;
font-size:16px;
line-height:16px;
background:#D95B43;
border:1px solid #542437;
color:#542437;
text-shadow:1px 1px 1px rgba(255,255,255,0.3);
font-weight:700;
cursor:pointer;
text-transform:uppercase;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:#C02942;
color:#FFF;
text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.accordion .content {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:#333;
margin:0 0 10px;
}
.accordion h3 {
color:#542437;
padding:0;
margin:10px 0;
}
/* Vertical */
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li label:hover {
border:1px solid #542437; /* We don't want the border to disappear on hover */
}
.vertical ul li .content {
height:0px;
border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {
height:300px;
border:1px solid #542437;
}
</style>
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1">Title One</label>
<div class="content">
<h3>A</h3>
<p>AA</p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-2" name="checkbox-accordion" />
<label for="checkbox-2">Title Two</label>
<div class="content">
<h3>B</h3>
<p>BB</p>
</div>
</li>
<li>
<input type="checkbox" id="checkbox-3" name="checkbox-accordion" />
<label for="checkbox-3">Title Three</label>
<div class="content">
<h3>C</h3>
<p>CC</p>
</div>
</li>
</ul>
</div>
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
부트스트랩 & 자바스크립트를 활용하시면 쉽게 가능합니다. 이곳을 참고하세요. http://getbootstrap.com/docs/4.0/components/collapse/
댓글 입력