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>
원하는 대로 잘 나옵니다.
질문 드리고 싶은 것은 제목이 모두 접혀나오는데 페이지 로딩시 특정 내용만 펼쳐 보이게 하고 싶은데 어떻게 해야하는지 모르겠습니다.
도움 부탁드립니다.
답변 1
if문에서 토글 실행할 때 실행되는 부분 (else~)을
펼치기 원하는 부분의 ID값을 넣어 스크립트 안에 한번 추가해주시면 로딩 시 1회 실행됩니다.
답변 감사합니다.
어떻게 해야 하는지 잘모르겠어요 ㅠㅠ
토글을 열 때 실행되는 부분이
document.getElementById(answerId).style.display = 'block';
document.getElementById(this.id + '-toggle').textContent = '-';
이니 함수 밖(스크립트 맨 밑)에서 한 번 실행해줍니다. 단, 상단에서
const answerId = this.id.replace('que', 'ans');
이 구문으로 que가 ans로 변환되니 (answerId) 부분에는 ('ans-1')을 넣어주시면 되겠네요.
document.getElementById('ans-1').style.display = 'block';
document.getElementById('que1-toggle').textContent = '-';
감사합니다~~
덕분에 잘 됩니다.
정말 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
