<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q&A Toggle</title>
<style>
.qna-container {
width: 100%;
margin: 40px auto;
font-family: 'Arial', sans-serif;
}
.qna-item {
margin-bottom: 15px;
overflow: hidden;
}
.line{
border-bottom: 1px solid black;
margin-bottom: 10px;
}
.question {
padding: 15px 20px;
font-size: 18px;
color: black;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0);
width: 100%;
text-align: left;
}
.question:hover {
}
.question::after {
content: '';
display: inline-block;
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%2Fa5357084-bd4e-40d8-a018-2fdd9095b1f8%2FFrame_48097686.png&blockId=1153358f-d4bf-808d-994a-eaf84d93788e');
background-size: contain;
background-repeat: no-repeat;
width: 18px;
height: 18px;
margin-left: 8px;
transition: transform 0.3s ease;
}
.question[aria-expanded="true"]::after {
transform: rotate(180deg);
}
.answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.1s ease;
}
.answer p {
font-size: 16px;
line-height: 1.5;
padding: 15px 0;
margin: 0;
}
.answer.expanded {
border-radius: 10px;
margin-bottom: 8px;
border: 1px solid #E4E4E4;
max-height: 200px;
}
.toggle-button {
background-image: url('https://prod-files-secure.s3.us-west-2.amazonaws.com/4031a111-bcc6-43de-a06d-82c640ce405a/a5357084-bd4e-40d8-a018-2fdd9095b1f8/Frame_48097686.png');
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 30px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="qna-container">
<div class="qna-item">
<button class="question" id="toggleButton1" aria-expanded="false">
융프라우 기차 사전 예약을 해야 하나요?
</button>
<div class="line"></div>
<div class="answer" id="toggleContent1_1" >
<p>NOPE! 사전예약 없이 현장에서 바로 결제 후 탑승 가능합니다~ 다만 극성수기의 경우 인파가 몰려 대기시간이 길어질 수 있으니 하루 전쯤 예약을 하는 것도 좋습니다😄 하지만 자연이 대부분을 차지하는 장소 특성상 날씨를 보고 당일에 어디 갈지를 고민해도 되서 굳이? 예약을 안 하여도…</p>
</div>
</div>
<div class="qna-item">
<button class="question" id="toggleButton2" aria-expanded="false">
VIP패스를 구매하면 무제한으로 이용할 수 있나요?
</button>
<div class="line"></div>
<div class="answer" id="toggleContent2_1">
<p> YES & NO, VIP 패스를 사용하면 융프라우 철도가 운영하는 7개의 노선과 유람선, 기차, 마을버스까지 무제한으로 이용할 수 있지만 융프라우 왕복구간(아이글렛쳐↔융프라우)는 왕복 1회만 가능하며 산악버스기차는 50%의 할인 가격으로 제공됩니다. 그외 액티비티 할인 등 다양한 혜택이 있으니 <a style="color:blue" href="https://www.jungfrau.co.kr/coupon/couponList_view.asp?dsIdx=1530&dsType=KO&dsWriteDate=2023-4-12">여기</a>서 확인!</p>
</div>
</div>
<div class="qna-item">
<button class="question" id="toggleButton3" aria-expanded="false">
하루만에 액티비티(패러글라이딩/스카이다이빙)랑 융프라우를 볼 수 있나요?
</button>
<div class="line"></div>
<div class="answer" id="toggleContent3_1">
<p> CASE by CASE, 말 그래도 상황에 따라 다른데 아침 일찍 액티비티가 끝나면 융프라우 왕복(약 6-7시간 소요)도 가능하고 그린델발트도 둘러볼 수 있지만 액티비티가 애매한 시간에 끝나면 융프라우까지는 못 가도 그린델발트 정도는 갈 수 있을 지도…?</p>
</div>
</div>
</div>
<script>
function setupToggleMultiple(buttonId, contentIds) {
const button = document.getElementById(buttonId);
button.addEventListener('click', function() {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
contentIds.forEach(contentId => {
const content = document.getElementById(contentId);
content.classList.toggle('expanded', !isExpanded);
});
});
}
setupToggleMultiple('toggleButton1', ['toggleContent1_1', 'toggleContent1_2', 'toggleContent1_3', 'toggleContent1_4', 'toggleContent1_5', 'toggleContent1_6', 'toggleContent1_7', 'toggleContent1_8', 'toggleContent1_9', 'toggleContent1_10', 'toggleContent1_11']);
setupToggleMultiple('toggleButton2', ['toggleContent2_1', 'toggleContent2_2', 'toggleContent2_3', 'toggleContent2_4', 'toggleContent2_5', 'toggleContent2_6', 'toggleContent2_7', 'toggleContent2_8']);
setupToggleMultiple('toggleButton3', ['toggleContent3_1', 'toggleContent3_2', 'toggleContent3_3', 'toggleContent3_4', 'toggleContent3_5', 'toggleContent3_6', 'toggleContent3_8', 'toggleContent3_8', 'toggleContent3_9']);
setupToggleMultiple('toggleButton4', ['toggleContent4_1', 'toggleContent4_2', 'toggleContent4_3', 'toggleContent4_4', 'toggleContent4_5', 'toggleContent4_6', 'toggleContent4_7', 'toggleContent4_8', 'toggleContent4_9', 'toggleContent4_10'] );
setupToggleMultiple('toggleButton5', ['toggleContent5_1', 'toggleContent5_2', 'toggleContent5_3', 'toggleContent5_4', 'toggleContent5_5', 'toggleContent5_6']);
setupToggleMultiple('toggleButton6', ['toggleContent6_1', 'toggleContent6_2']);
</script>
</body>
</html>
