QNA,FAQ 공통 폼
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<style type="text/css">
#faq_list {border-bottom:1px solid #ccc}
#faq_list li {border-top:1px solid #ccc; padding:0 5px}
#faq_list li h4 a {display:block; padding:8px}
#faq_list li p {border-top:1px dotted #eaeaea; padding:8px; line-height:18px}
#faq_list li.unfold h4 a {font-weight:bold}
#faq_list li.fold p {display:none}
</style>
<script type="text/javascript">
jQuery(function($){
var faqList = $("#faq_list>li"); //리스트를 변수로 저장
faqList.attr("class","fold"); //dom이 로딩되면 다 접어서 닫아준다
function unfoldFaq(){
if($(this).parent().parent("li").hasClass("unfold")){ //열려있으면
$(this).parent().parent("li").removeClass("unfold").addClass("fold"); //닫아주고
} else { //닫혀있으면
faqList.attr("class","fold"); //다른 리스트는 닫아주고
$(this).parent().parent("li").removeClass("fold").addClass("unfold"); //클릭한 리스트는 열어준다
}
}
faqList.find(">h4>a").click(unfoldFaq);
});
</script>
<body style="padding:20px;">
<ul id="faq_list">
<li>
<h4><a href="#a1">faq 제목1 영역입니다.</a></h4>
<p>faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. </p>
</li>
<li>
<h4><a href="#a2">faq 제목2 영역입니다.</a></h4>
<p>faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. </p>
</li>
<li>
<h4><a href="#a3">faq 제목3 영역입니다.</a></h4>
<p>faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. </p>
</li>
<li>
<h4><a href="#a4">faq 제목4 영역입니다.</a></h4>
<p>faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. </p>
</li>
<li>
<h4><a href="#a5">faq 제목5 영역입니다.</a></h4>
<p>faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. faq 내용 영역입니다. </p>
</li>
</ul>
</body>
[출처] faq 제이쿼리 만들어보기|작성자 kaeng