연습장:Sakura/1: 두 판 사이의 차이

  • 최근 수정 시각: 2023년 2월 19일 (일) 19:04
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
< 연습장:Sakura
← 이전 편집다음 편집 →
시각위키텍스트
편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
<html>
<html>
<div class="foldable">
<div class="accordion">
   <button class="fold-btn" onclick="fold()">▼</button>
   <div class="accordion-header">Section 1</div>
   <button class="unfold-btn" onclick="unfold()">▲</button>
  <div class="accordion-content">
   <div class="fold-content">
    <p>Content for Section 1 goes here.</p>
     <h1>삼각김밥 레시피</h1>
  </div>
    <ul>
   <div class="accordion-header">Section 2</div>
      <li>김밥 재료 준비하기</li>
   <div class="accordion-content">
      <li>밥을 삼각김밥 모양으로 구성하기</li>
     <p>Content for Section 2 goes here.</p>
      <li>김밥에 담을 재료를 골라 넣기</li>
  </div>
      <li>삼각김밥 말아내기</li>
  <div class="accordion-header">Section 3</div>
    </ul>
  <div class="accordion-content">
    <p>Content for Section 3 goes here.</p>
   </div>
   </div>
</div>
</div>


<style>
<style>
.foldable {
.accordion-header {
  cursor: pointer;
  font-weight: bold;
}
 
.accordion-content {
  max-height: 0;
   overflow: hidden;
   overflow: hidden;
   transition: height 0.5s;
   transition: max-height 0.2s ease-out;
  height: 50px;
}
}
.fold-content {
 
   display: none;
.accordion-content.active {
}
   max-height: 500px;
.unfold-btn {
  display: none;
}
}
</style>
</style>


<script>
<script>
function fold() {
const accordionHeaders = document.querySelectorAll('.accordion-header');
  var foldable = document.querySelector('.foldable');
  var foldBtn = document.querySelector('.fold-btn');
  var unfoldBtn = document.querySelector('.unfold-btn');
  var content = document.querySelector('.fold-content');
  foldable.style.height = '50px';
  content.style.display = 'none';
  foldBtn.style.display = 'block';
  unfoldBtn.style.display = 'none';
}


function unfold() {
accordionHeaders.forEach(header => {
   var foldable = document.querySelector('.foldable');
   header.addEventListener('click', () => {
  var foldBtn = document.querySelector('.fold-btn');
    header.nextElementSibling.classList.toggle('active');
  var unfoldBtn = document.querySelector('.unfold-btn');
   });
   var content = document.querySelector('.fold-content');
});
  foldable.style.height = content.offsetHeight + 'px';
  content.style.display = 'block';
  foldBtn.style.display = 'none';
  unfoldBtn.style.display = 'block';
}
</script>
</script>
</html>
</html>

2023년 2월 19일 (일) 19:04 판

Section 1

Content for Section 1 goes here.

Section 2

Content for Section 2 goes here.

Section 3

Content for Section 3 goes here.