div 접고 펼치기
본문
그누 검색으로 조금씩 배워가는 중입니다.
조언을 통해서 div 접고 펼치기를 아래와 같이 했는데
<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));
</script>
원하는 대로 잘 나옵니다.
질문 드리고 싶은 것은 제목이 모두 접혀나오는데 페이지 로딩시 특정 내용만 펼쳐 보이게 하고 싶은데 어떻게 해야하는지 모르겠습니다.
도움 부탁드립니다.
!-->
답변을 작성하시기 전에 로그인 해주세요.