
<!-- 他の曜日の営業時間 -->
<div class="opening-hours">
<div class="opening-hour">
<span class="day">火曜日</span>
<span class="time">09:00 - 20:00</span>
</div>
<div class="opening-hour">
<span class="day">水曜日</span>
<span class="time">09:00 - 20:00</span>
</div>
<div class="opening-hour">
<span class="day">木曜日</span>
<span class="time">09:00 - 20:00</span>
</div>
<div class="opening-hour">
<span class="day">金曜日</span>
<span class="time">09:00 - 20:00</span>
</div>
<div class="opening-hour">
<span class="day">土曜日</span>
<span class="time">10:00 - 18:00</span>
</div>
<div class="opening-hour">
<span class="day">月曜日</span>
<span class="time">09:00 - 20:00</span>
</div>
<div class="opening-hour">
<span class="day">日曜日</span>
<span class="time">10:00 - 18:00</span>
</div>
</div>
<!-- リンク -->
<a id="toggle-link" href="#">他の曜日の営業時間を表示する</a>
<script>
document.addEventListener("DOMContentLoaded", function() {
var today = new Date().getDay(); // 今日の曜日(0: 日曜日, 1: 月曜日, ..., 6: 土曜日)
var toggleLink = document.getElementById('toggle-link');
var openingHours = document.querySelectorAll('.opening-hour');
// 初期状態では他の曜日の営業時間を非表示にする
for (var i = 0; i < openingHours.length; i++) {
var day = openingHours[i].querySelector('.day').textContent;
if (day !== getDayName(today)) {
openingHours[i].style.display = 'none';
}
}
// リンクのクリックイベント
toggleLink.addEventListener('click', function(e) {
e.preventDefault(); // デフォルトのクリック動作を無効化
// 他の曜日の営業時間を表示・非表示にする
for (var i = 0; i < openingHours.length; i++) {
if (openingHours[i].style.display === 'none') {
openingHours[i].style.display = 'block';
toggleLink.textContent = '閉じる';
} else {
openingHours[i].style.display = 'none';
toggleLink.textContent = '他の曜日を表示';
}
}
});
// 曜日の番号を曜日の名前に変換する関数
function getDayName(dayNumber) {
var days = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
return days[dayNumber];
}
});
</script>

コメントを残す