jQuery 아코디언메뉴
2021. 12. 15. 10:25ㆍStudy/jQuery
Q&A나 FAQ에서 많이 쓰이는 아코디언 메뉴
CSS
@charset "utf-8";
/* CSS Document */
*{margin: 0; padding:0;}
body{font-size:16px; color:#333; line-height:1.6; margin: 30px;}
ul, li{list-style:none;}
a{color:inherit; text-decoration: none;}
.faq{width:650px; border-bottom:1px solid #ddd;font-size:12px}
.faq .hgroup{position:relative; margin:0 0 10px 0;}
.faq .hgroup .all{position:absolute; top:5px; right:10px;}
.faq .q{border-top:1px solid #ddd}
.faq .q .trigger{display:block; padding:10px 15px; background:#fafafa;}
.faq .hide .q .trigger{font-weight:normal; background:none}
.faq .q .trigger:hover,
.faq .q .trigger:active,
.faq .q .trigger:focus{background:#feeddd}
.faq .a{padding:10px 15px; text-align:justify; overflow:hidden; display: none;}
JS
// JavaScript Document
$(document).ready(function () {
var article = $('.faq ul li');
$('.faq .trigger').click(function(e){
e.preventDefault;
var myArticle = $(this).parent().parent(); // 클릭한 해당 li
if(myArticle.is('.hide')){ // 해당 li에 클래스가 hide면
article.find('.a').slideUp(100);
article.removeClass('show').addClass('hide');
myArticle.removeClass('hide').addClass('show'); // 클래스를 show로 바꾼다
myArticle.find('.a').slideDown(100); // 해당 리스트의 답변을 열어준다
} else {
myArticle.removeClass('show').addClass('hide');
myArticle.find('.a').slideUp(100);
}
});
//모두여닫기
$('.all').toggle(function(e){
e.preventDefault;
$(this).text('모두 닫기 △');
article.find('.a').slideDown(100);
article.removeClass('hide').addClass('show');
},function(e){
e.preventDefault;
$(this).text('모두 열기 ▽');
article.find('.a').slideUp(100);
article.removeClass('show').addClass('hide');
});
});
HTML
<!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>Document</title>
<link href="css/content.css" rel="stylesheet">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/faq.js"></script>
</head>
<body>
<div class="faq">
<div class="hgroup">
<h2>자가진단</h2>
<a class="all" href="#">모두 열기 ▽</a>
</div>
<ul>
<li class="hide">
<p class="q">
<a class="trigger" href="#" >1. 제품사용중동작이 멈췄어요.</a>
</p>
<p class="a">- 전원 버튼을 20초 이상 누른 후 제원이 꺼지면 전원 버튼을 눌러 다시 켜신 다음 이용해 주세요. RESET 키를 누른 후 이용해 주세요. 전원 버튼을 20초 이상 누른 후 제원이 꺼지면 전원 버튼을 눌러 다시 켜신 다음 이용해 주세요. RESET 키를 누른 후 이용해 주세요.</p>
</li>
<li class="hide">
<p class="q">
<a class="trigger" href="#" >2. 화면이 자꾸 꺼져요.</a>
</p>
<p class="a">- 설정 → 화면설정 → 조명시간을 확인하세요. 설정 → 화면설정 → 조명시간을 확인하세요. 설정 → 화면설정 → 조명시간을 확인하세요.</p>
</li>
<li class="hide">
<p class="q">
<a class="trigger" href="#" >3. 제품사용중동작이 멈췄어요.</a>
</p>
<p class="a">- 전원 버튼을 20초 이상 누른 후 제원이 꺼지면 전원 버튼을 눌러 다시 켜신 다음 이용해 주세요. RESET 키를 누른 후 이용해 주세요. </p>
</li>
<li class="hide">
<p class="q">
<a class="trigger" href="#" >4. 화면이 자꾸 꺼져요.</a>
</p>
<p class="a">- 설정 → 화면설정 → 조명시간을 확인하세요.</p>
</li>
</ul>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery silde left (partenr banner) (0) | 2021.12.15 |
|---|---|
| jQuery 아코디언 갤러리 (컬랩스) (0) | 2021.12.15 |
| jQuery 순차적 접근 (0) | 2021.12.15 |
| jQuery 순차적 접근, 자동롤링 (0) | 2021.12.14 |
| jQuery 객체 배열 팝업 (0) | 2021.12.14 |
