제이쿼리로 스르륵 열리는 아코디언 메뉴 만들기 (자주하는 질문, FAQ)

1. 소스 

[HTML]

<div class="wrap">
    <div>
       <ul class="box">
           <li>
               <button>
                    <span class="faq_Q">Q</span>
                    <span class="faq_que">질문01?</span>
               </button>
               <div class="faq_answer_box">
                   <span class="faq_A">A</span>
                   <span class="faq_answer">
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                   </span>
               </div>
           </li>
           <li>
               <button>
                    <span class="faq_Q">Q</span>
                    <span class="faq_que">질문02?</span>
               </button>
               <div class="faq_answer_box">
                   <span class="faq_A">A</span>
                   <span class="faq_answer">
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                   </span>
               </div>
           </li>
           <li>
               <button>
                    <span class="faq_Q">Q</span>
                    <span class="faq_que">질문03?</span>
               </button>
               <div class="faq_answer_box">
                   <span class="faq_A">A</span>
                   <span class="faq_answer">
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                   </span>
               </div>
           </li>
           <li>
               <button>
                    <span class="faq_Q">Q</span>
                    <span class="faq_que">질문04?</span>
               </button>
               <div class="faq_answer_box">
                   <span class="faq_A">A</span>
                   <span class="faq_answer">
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                   </span>
               </div>
           </li>
           <li>
               <button>
                    <span class="faq_Q">Q</span>
                    <span class="faq_que">질문05?</span>
               </button>
               <div class="faq_answer_box">
                   <span class="faq_A">A</span>
                   <span class="faq_answer">
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                    <p>내용 내용 내용 내용 내용 내용</p>
                   </span>
               </div>
           </li>
       </ul>   
    </div>
</div>

 

[CSS]

<style>
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
img {border: 0; outline: 0}
a {text-decoration: none; color:#333;}
button, fieldset, input{border: 0; outline: 0; background: none;}
button {cursor: pointer;}
table {border-collapse: collapse; border-spacing: 0}
caption, legend {font-size: 0; color:transparent; text-indent: -9999px; overflow: hidden;}
body,html{height: 100%;}

/*아코디언메뉴 디자인*/
.wrap{width: 100%}
.wrap > div{width: 600px; margin: 0 auto;}
.wrap ul.box > li{width: 100%;  border-bottom: 1px solid #d7d7d7;}
.wrap ul.box > li:first-child{border-top: 2px solid #091f60;}
.wrap ul.box > li > button{width: 100%; display: block; padding:10px 16px; text-align: left; position: relative;}

.wrap ul.box span.faq_Q{width: 24px; height: 24px; border-radius: 50%; background: #003399; display: inline-block; text-align: center; color: #fff; line-height: 24px; position: absolute; left:20px; top:10px;}
.wrap ul.box span.faq_que{padding-left:70px; width: 100%; display: block;}
.wrap ul.box .faq_answer_box{width: 100%; height: auto; background: #f6f6f6; padding: 20px; position: relative; font-size: 16px; border-top: 1px solid #d7d7d7;}
.wrap ul.box span.faq_A{width: 24px; height: 24px; border-radius: 50%; background: #24a1d5; display: inline-block; text-align: center; color: #fff; line-height: 24px; position: absolute; left: 20px; top:20px;}
.wrap ul.box span.faq_answer{display:block;padding-left: 70px; word-break: keep-all;}
</style>

 

[JS]

<script>
$(document).ready(function(){
    $('.box .faq_answer_box').hide();
    $('.box button').click(function() {
        $('.faq_answer_box').stop().slideUp(300);
        $(this).next('.faq_answer_box').stop().slideToggle(300)     
    });
});  
</script>

 

2. 결과 화면 

See the Pen Untitled by H__jung (@honghongbyul) on CodePen.

 

3. 제이쿼리 문법 정리  

• .stop() :  현재 동작하고 있는 애니메이션은 동작이 즉시 중단된다. 
• .slideUp() : 선택한 요소를 위쪽으로 서서히 사라지게 한다.
• .slideToggle() : 안 보이는 요소는 아래쪽으로 나타나게 하고, 보이는 요소는 위쪽으로 사라지게 한다.