워킹투어 백업 (1)

<style>
  .toggleContent {
      color: white !important;
  }
  
  .toggle_div {
      margin: 20px 0;
      display: flex;
      justify-content: left;
  }

  .toggleButton {
      display: flex;
      color: white;
      background-color: black;
      align-items: center; /* 세로 중앙 정렬 */
      justify-content: flex-start; /* 왼쪽 정렬 */
      padding: 12px 10px;
      width: 100%;
      font-size: 16px;
      border: 1px solid white; 
      border-radius: 6px;
      cursor: pointer;
  }

  .icon {
      width: 24px; /* 아이콘 크기 조정 */
      height: 24px; /* 아이콘 크기 조정 */
      margin-right: 10px; /* 텍스트와 아이콘 사이 여백 */
      background-size: contain; /* 배경 이미지 크기 조정 */
      background-repeat: no-repeat; /* 이미지를 반복하지 않음 */
      background-position: center;
  }

  .open {
      background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2Fe9df36da-2055-45d0-b292-40821c9fb9e7%2Fri_arrow-up-s-line-1.png&blockId=1073358f-d4bf-8084-9def-ded4f14a970f'); /* 닫힌 이미지 */
  }

  .closed {
      background-image: url('https://oopy.lazyrockets.com/api/v2/notion/image?src=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F4031a111-bcc6-43de-a06d-82c640ce405a%2F22a9b552-82cf-4216-95f4-68a9687c0099%2Fri_arrow-up-s-line.png&blockId=f14e98f9-1393-4dca-b9d1-af99f98b1365'); /* 열린 이미지 */
  }

  .toggleContent.collapsed {
      display: none;
  }

  .toggleContent {
      display: block;
  }
</style>

<script>
document.querySelectorAll('.toggleButton').forEach(button => {
    button.addEventListener('click', function() {
        const content = this.parentElement.nextElementSibling;
        const icon = this.querySelector('.icon');
        const isCollapsed = content.classList.contains('collapsed');
        
        // Toggle collapsed class for content
        content.classList.toggle('collapsed', !isCollapsed);
        
        // Toggle aria-expanded attribute
        this.parentElement.setAttribute('aria-expanded', !isCollapsed);
        
        // Toggle icon classes
        icon.classList.toggle('closed', !isCollapsed);
        icon.classList.toggle('open', isCollapsed);
    });
});
</script>




<style>
  
  /* 스크롤바 스타일 */
  .button-container::-webkit-scrollbar {
    height: 8px; /* 스크롤바의 높이 */
  }

  .button-container::-webkit-scrollbar-track {
    background: rgba(240, 240, 240, 0); /* 스크롤바 배경 색 */
  }

  .button-container::-webkit-scrollbar-thumb {
    background: rgba(240, 240, 240, 0); /* 스크롤바 thumb 색 */
    border-radius: 4px; /* 모서리 둥글게 */
  }

  .tap_button_style_b {
    position: relative;
    border: 1px solid white;
    padding: 10px 20px;
    color: white;
	margin: 40px 0 40px 0;
    border-radius: 20px;
    background-color: rgba(240, 240, 240, 0);
    cursor: pointer;
  }

  .tap_button_style_b:hover {
    font-weight: bold;
    color: black;
    background-color: white;
  }

  .active_b {
    font-weight: bold;
    color: black;
    background-color: white;
  }

  .button-container {
    display: flex;
    overflow-x: auto;
	justify-content: center;
    padding: 2px 13px;
    white-space: nowrap;
    cursor: grab;
  }

  .button-container:active {
    cursor: grabbing;
  }

  .button-container button {
    margin-right: 20px;
  }
</style>

<script>
  function moveMap(lat, lng, zoom, button, containerClass) {
    var iframe = document.getElementById('mapFrame');
    iframe.src = `https://www.google.com/maps/d/u/0/embed?mid=1dq6s6ij5JFedqfX1uMeJ-ZBwl3htWoU&ll=${lat},${lng}&z=${zoom}`;

    var buttons = document.querySelectorAll('.tap_button_style_b');
    buttons.forEach(btn => {
      btn.classList.remove('active_b');
    });

    button.classList.add('active_b');

    // 모든 ._cont div 숨기기
    var allConts = document.querySelectorAll('[class$="_cont"]');
    allConts.forEach(cont => {
      cont.style.display = 'none';
    });

    // 클릭한 버튼에 해당하는 ._cont div 보이기
    document.querySelector(`.${containerClass}`).style.display = 'block';
  }

  const container = document.getElementById('buttonContainer');
  let isDown = false;
  let startX;
  let scrollLeft;

  container.addEventListener('mousedown', (e) => {
    isDown = true;
    startX = e.pageX - container.offsetLeft;
    scrollLeft = container.scrollLeft;
    container.style.cursor = 'grabbing';
  });

  container.addEventListener('mouseleave', () => {
    isDown = false;
    container.style.cursor = 'grab';
  });

  container.addEventListener('mouseup', () => {
    isDown = false;
    container.style.cursor = 'grab';
  });

  container.addEventListener('mousemove', (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - container.offsetLeft;
    const walk = (x - startX) * 2; // 스크롤 속도 조정
    container.scrollLeft = scrollLeft - walk;
  });
</script>

HTML
복사

<div class="toggle_div" aria-expanded="false">
    <div class="toggleButton">
        <span class="icon closed" alt="토글 이미지"></span>
        또 다른 스크립트 보기
    </div>
</div>
<div class="toggleContent collapsed">
    <p>
📄 다른 내용

여기에는 다른 내용을 추가할 수 있습니다!
</p>
</div>
HTML
복사