Faq 구현
|
||
Html
<dl>
<dt><a href="#">질문영역입니다.</a></dt>
<dd>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/></dd>
<dt><a href="#">질문영역입니다.</a></dt>
<dd>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/></dd>
<dt><a href="#">질문영역입니다.</a></dt>
<dd>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/></dd>
<dt><a href="#">질문영역입니다.</a></dt>
<dd>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/></dd>
<dt><a href="#">질문영역입니다.</a></dt>
<dd>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/></dd>
<dt><a href="#">질문영역입니다.</a></dt>
<dd>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/></dd>
<dt><a href="#">질문영역입니다.</a></dt>
<dd>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/></dd>
<dt><a href="#">질문영역입니다.</a></dt>
<dd>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/>답변영역입니다.<br/></dd>
</dl>
<p class="btn">
<button type="button" onclick="$('link').attr('href','')">CSS(X)</button>
<button onclick="$('link').attr('href',',css링크')" type="button">CSS(O)</button>
</p>
Css
.faq{margin-top:10px:*zoom:1}
.faq:after{content:""; clear:both; display:block}
.faq dt{padding:5px 10px 5px 10px; margin-top:-1px; border:solid 1px #ccc; border-left:0; border-right:0; background-color:#eee;}
.faq dd{padding:10px;}
.faq dt a{color:#000 text-decoration:none;}
.faq p{margin:10px 0px 10px 0px;}
Jquery
jQuery(function($){
$(".faq dd").hide();
$(".faq dt").click(function(){
var objNum = $(".faq dd");
var objIdx= $(".faq dt").index(this);
for (i=0; i<objNum.length; i++ ){
if(i==objIdx){
$(objNum[objIdx]).slideToggle(100);
} else if (i!=objIdx){
$(objNum[i]).slideUp(100);
}
}
});
});