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

  • 최근 수정 시각: 2023년 2월 19일 (일) 18:12
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
< 연습장:Sakura
← 이전 편집다음 편집 →
시각위키텍스트
편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
<html>
<html>
<div class="container">
<div class="container">
  <button class="toggle-btn">[펼치기 · 접기]</button>
   <div class="content">
   <div class="content">
     <p>숨겨진 내용입니다.</p>
     <p>숨겨진 내용입니다.</p>
   </div>
   </div>
  <button class="toggle-btn">[펼치기 · 접기]</button>
</div>
</div>
<style>
<style>
.container {
.container {
   width: 420px;
   width: 420px;
  overflow: hidden;
   position: relative;
   position: relative;
  transition: height 0.3s ease-in-out;
}
}


.content {
.content {
   position: absolute;
   position: absolute;
  top: 100%;
   left: 0;
   left: 0;
  top: 0;
   width: 100%;
   width: 100%;
   height: auto;
   height: 0;
   padding: 20px;
   overflow: hidden;
   box-sizing: border-box;
   transition: height 0.5s ease-in-out;
}
}


.toggle-btn {
.toggle-btn {
   position: absolute;
   margin-bottom: 10px;
  right: 20px;
  bottom: 20px;
  padding: 5px 10px;
   font-size: 14px;
   font-size: 14px;
  line-height: 1;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
   cursor: pointer;
   cursor: pointer;
}
}
45번째 줄: 36번째 줄:
toggleBtn.addEventListener('click', function() {
toggleBtn.addEventListener('click', function() {
   if (isCollapsed) {
   if (isCollapsed) {
     container.style.height = `${content.offsetHeight}px`;
     content.style.height = `${content.scrollHeight}px`;
     toggleBtn.textContent = '[접기]';
     toggleBtn.textContent = '[접기]';
   } else {
   } else {
     container.style.height = `${toggleBtn.offsetHeight}px`;
     content.style.height = 0;
     toggleBtn.textContent = '[펼치기 · 접기]';
     toggleBtn.textContent = '[펼치기 · 접기]';
   }
   }

2023년 2월 19일 (일) 18:12 판

숨겨진 내용입니다.