公式YouTube

JSで営業時間をひょうじ 始め今日の時間のみ表示後で他の時間を展開

展開前
<!-- 他の曜日の営業時間 -->
<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>
展開ご

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ド "place_id" の件数: 52