댓글 접기 펼치기: 순수 자바스크립트 구현 가이드

💬 댓글 접기/펼치기 예제 + 소스 보기

아래는 순수 자바스크립트로 만든 댓글 접기/펼치기 기능입니다. 버튼을 클릭하면 댓글이 보였다가 다시 숨겨지며, 하단에는 실제 사용된 전체 코드를 코드 블록 형태로 표시합니다.

이곳은 댓글 내용입니다.
- 사용자 A: 유용한 글 감사합니다.
- 사용자 B: 코드 잘 작동해요!

728x90

📄 사용된 전체 소스 보기

<button id="toggleBtn" style="padding:10px 20px; font-size:16px; background:#007BFF; color:white; border:none; border-radius:6px; cursor:pointer;">
  댓글 보기
</button>

<div id="commentBox" style="display:none; margin-top:10px; padding:15px; border:1px solid #ccc; border-radius:10px; background:#f9f9f9;">
  <p style="margin:0;">
    이곳은 댓글 내용입니다.<br/>
    - 사용자 A: 유용한 글 감사합니다.<br/>
    - 사용자 B: 코드 잘 작동해요!
  </p>
</div>

<script>
  const toggleBtn = document.getElementById('toggleBtn');
  const commentBox = document.getElementById('commentBox');

  toggleBtn.addEventListener('click', function () {
    const isVisible = commentBox.style.display === 'block';
    if (isVisible) {
      commentBox.style.display = 'none';
      toggleBtn.textContent = '댓글 보기';
    } else {
      commentBox.style.display = 'block';
      toggleBtn.textContent = '댓글 접기';
    }
  });
</script>
  

🔗 더 많은 자바스크립트 예제 보러가기

👉 코딩하는 늑대 블로그 (블로그스팟)에서 더 다양한 웹 개발 팁을 확인하세요!