tab 펼쳤다 접었다하는 스크립트 소스 모음

thum

메뉴나 토글형식의 ui에서 자주쓰는 스크립트





//기본 누르면 열렸다 펼쳤다 하도록 설정

// Optional: Automatically close other tabs when one is opened
document.querySelectorAll('.tab-toggle').forEach(toggle => {
  toggle.addEventListener('change', function () {
    if (this.checked) {
      document.querySelectorAll('.tab-toggle').forEach(otherToggle => {
        if (otherToggle !== this) otherToggle.checked = false;
      });
    }
  });
});



// 첫 번째 탭은 항상 열려 있고, 다른 탭은 하나만 열리도록 설정
document.addEventListener('DOMContentLoaded', () => {
  const tabToggles = document.querySelectorAll('.tab-toggle');
  
  // 첫 번째 탭을 항상 체크된 상태로 설정하고 비활성화
  if (tabToggles.length > 0) {
    tabToggles[0].checked = true;
    tabToggles[0].disabled = true;
  }

  tabToggles.forEach((toggle, index) => {
    if (index === 0) return; // 첫 번째 탭은 이벤트 리스너를 추가하지 않음

    toggle.addEventListener('change', function () {
      if (this.checked) {
        tabToggles.forEach((otherToggle, otherIndex) => {
          if (otherIndex !== 0 && otherToggle !== this) {
            otherToggle.checked = false;
          }
        });
      }
    });
  });
});




// 처음 시작할 때 첫 번째 탭을 열고, 이후 하나의 탭만 열리도록 설정
document.addEventListener('DOMContentLoaded', () => {
  const tabToggles = document.querySelectorAll('.tab-toggle');
  
  // 처음 시작할 때 첫 번째 탭을 체크된 상태로 설정
  if (tabToggles.length > 0) {
    tabToggles[0].checked = true;
  }

  tabToggles.forEach(toggle => {
    toggle.addEventListener('change', function () {
      if (this.checked) {
        tabToggles.forEach(otherToggle => {
          if (otherToggle !== this) {
            otherToggle.checked = false;
          }
        });
      } else {
        // 모든 탭이 닫히는 것을 방지
        if ([...tabToggles].every(t => !t.checked)) {
          this.checked = true;
        }
      }
    });
  });
});



==================================


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collapsible Tabs</title>
<script>
// 처음 시작할 때 첫 번째 탭을 열고, 이후 하나의 탭만 열리도록 설정
document.addEventListener('DOMContentLoaded', () => {
  const tabToggles = document.querySelectorAll('.tab-toggle');
  
  // 처음 시작할 때 첫 번째 탭을 체크된 상태로 설정
  if (tabToggles.length > 0) {
    tabToggles[0].checked = true;
  }

  tabToggles.forEach(toggle => {
    toggle.addEventListener('change', function () {
      if (this.checked) {
        tabToggles.forEach(otherToggle => {
          if (otherToggle !== this) {
            otherToggle.checked = false;
          }
        });
      } else {
        // 모든 탭이 닫히는 것을 방지
        if ([...tabToggles].every(t => !t.checked)) {
          this.checked = true;
        }
      }
    });
  });
});



</script>  
<style type="text/css">  
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f9f9f9;
}

.tabs {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.tab {
  border-bottom: 1px solid #ddd;
}

.tab:last-child {
  border-bottom: none;
}

.tab-toggle {
  display: none;
}

.tab-label {
  display: block;
  padding: 15px 20px;
  background: #f1f1f1;
  color: #333;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

.tab-label:hover {
  background: #e2e2e2;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 20px;
  background: #fafafa;
}

.tab-content p {
  margin: 15px 0;
}

.tab-toggle:checked + .tab-label + .tab-content {
  max-height: 200px;
  padding: 15px 20px;
}
</style>
</head>
<body>
  <div class="tabs">
    <div class="tab">
      <input type="checkbox" id="tab-1" class="tab-toggle">
      <label for="tab-1" class="tab-label">Tab 1</label>
      <div class="tab-content">
        <p><span>Content for Tab 1. This is where you can place your details.< br/></span>
           <span>Content for Tab 1. This is where you can place your details.< br/></span>
           <span>Content for Tab 1. This is where you can place your details.< br/></span>
           <span>Content for Tab 1. This is where you can place your details.< br/></span>
           <span>Content for Tab 1. This is where you can place your details.< br/></span>
           <span>Content for Tab 1. This is where you can place your details.< br/></span>
           <span>Content for Tab 1. This is where you can place your details.< br/></span>
           <span>Content for Tab 1. This is where you can place your details.< br/></span>
           Content for Tab 1. This is where you can place your details.< br/>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
            Content for Tab 1. This is where you can place your details.< /br>
        </p>
            
      </div>
    </div>

    <div class="tab">
      <input type="checkbox" id="tab-2" class="tab-toggle">
      <label for="tab-2" class="tab-label">Tab 2</label>
      <div class="tab-content">
        <p>Content for Tab 2. You can add more text or components here.</p>
      </div>
    </div>

    <div class="tab">
      <input type="checkbox" id="tab-3" class="tab-toggle">
      <label for="tab-3" class="tab-label">Tab 3</label>
      <div class="tab-content">
        <p>Content for Tab 3. Expand or collapse for more details.</p>
      </div>
    </div>
  </div>
  
</body>
</html>


==================
Collapsible Tabs

Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details. < br /> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br> Content for Tab 1. This is where you can place your details.< /br>

Content for Tab 2. You can add more text or components here.

Content for Tab 3. Expand or collapse for more details.





※ 이 사이트의 모든 포스팅은 협찬 및 유료광고를 포함하고 있지 않습니다. ※개인 취향에 따른 리뷰이니, 부디 참고만 하시길!


daily-inklings 전체 글 보기

이글은 에 최종으로 업데이트된 글입니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

웹 성능 최적화를 위한 Image Lazy Loading 기법

이미지
Image Lazy Loading은 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 테크닉입니다. 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이라 볼 수 있습니다. 이 방식은 웹 성능과 디바이스 내 리소스 활용도 증가, 그리고 연관된 비용을 줄이는데 도움을 줄 수 있습니다. 영어 단어 중 'lazy'는 '가능한 길게 일을 미루는 행위' 란 의미에 기반합니다. <img src="…" loading="lazy" alt="…" width="200" height="200"> <img src="…" loading="lazy" alt="…" style="height:200px; width:200px;"> loading="lazy"
Read more »

블로그스팟 위젯 항상 펼치기 코딩 소스

이미지
블로그스팟 위젯 항상 펼쳐지기 개인적으로 위젯 중 라벨(태그) 부분은 항상 펴기로 설정하는 것을 선호합니다. 라벨(태그) 가젯 항상 펼치기 HTML 편집 모드에서 다음 코드를 찾아봅니다. 현재 라벨 가젯이 하나라면 2곳을 찾을 수 있습니다. 코드 수정 전 <b:attr cond='data:view.isLabelSearch' name='open' value='open'/> 코드 수정 후 <b:attr name='open' value='open'/> 확인 사항 (2020.08.04) 'Blogger > 테마 > HTML 편집'을 통해 직접 코드를 수정하기 전에 반드시 'Blogger > 테마 > 백업' 기능을 이용하여 XML 파일을 사전 다운로드하세요. 변경 후에는 다시 다운로드하여 의도한 부분만 수정되었는지 비교해보세요. 추가 설명 앞서 찾은 두 곳의 코드 중 하나는 <head> 안에 있으며, 기본 라벨 가젯 속성을 정의하여 앞으로 추가하는 라벨 가젯에도 영향을 줍니다. 다른 하나는 <body> 내부에 있으며, 현재 존재하는 라벨 가젯의 속성을 설정합니다. 위 수정 작업을 완료하고 '저장' 버튼을 누르면 현재 라벨 가젯과 앞으로 추가하는 라벨 가젯 모두 항상 펼쳐진 상태로 유지됩니다.
Read more »