[ETC] JQ - FAQ (자주묻는질문) 아코디언 메뉴

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>

.answer { display: none;  padding-bottom: 30px;  }

#faq-title { font-size: 25px; }

.faq-content { border-bottom: 1px solid #e0e0e0; }

.question { font-size: 19px; padding: 30px 0;  cursor: pointer; border: none; outline: none; background: none;  width: 100%;  text-align: left; }

.question:hover { color: #2962ff; }

[id$="-toggle"] { margin-right: 15px; }

</style>

 

<span id="faq-title">자주 묻는 질문(FAQ)</span>

<div class="faq-content">

    <button class="question" id="que-1"><span id="que-1-toggle">+</span><span>제목</span></button>

    <div class="answer" id="ans-1">내용</div>

</div>

<div class="faq-content">

    <button class="question" id="que-2"><span id="que-2-toggle">+</span><span>제목</span></button>

    <div class="answer" id="ans-2">내용</div>

</div>

 

 

<script>

const items = document.querySelectorAll('.question');

function openCloseAnswer() {

    const answerId = this.id.replace('que', 'ans');

    if(document.getElementById(answerId).style.display === 'block') {

      document.getElementById(answerId).style.display = 'none';

      document.getElementById(this.id + '-toggle').textContent = '+';

    } else {

      document.getElementById(answerId).style.display = 'block';

      document.getElementById(this.id + '-toggle').textContent = '-';

    }

}

items.forEach(item => item.addEventListener('click', openCloseAnswer));

document.getElementById('ans-1').style.display = 'block';

document.getElementById('que-1-toggle').textContent = '-';

</script>

 

결과보기 

※ 파란색 코드 : 특정 질문의 답변 먼저 펼쳐보이기

강아지망아지 님 + 서야 님 (201218) https://sir.kr/qa/390626