JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Toggle</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>

    <button id="days-2" class="calc__switcher">2 дня</button>
    <button id="days-5" class="calc__switcher">5 дней</button>
    <button id="days-6" class="calc__switcher">6 дней</button>
    <button id="days-10" class="calc__switcher">10 дней</button>
    <button id="days-14" class="calc__switcher">14 дней</button>
    <button id="days-30" class="calc__switcher">30 дней</button>

    <button class="yellow__button button__text" id="credit">Рассрочка</button>
    <button class="white__button button__text order__food">Заказать питание</button>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const creditButton = document.getElementById('credit');
            const dayButtons = document.querySelectorAll('.calc__switcher');

            dayButtons.forEach(button => {
                button.addEventListener('click', function () {
                    dayButtons.forEach(btn => btn.classList.remove('calc__switcher_active'));
                    this.classList.add('calc__switcher_active');
                    toggleCreditButton();
                });
            });

            function toggleCreditButton() {
                const activeButton = document.querySelector('.calc__switcher_active');
                const activeId = activeButton.id;

                if (['days-14', 'days-30'].includes(activeId)) {
                    creditButton.classList.remove('hidden');
                } else {
                    creditButton.classList.add('hidden');
                }
            }

            // Инициализация состояния при загрузке страницы
            toggleCreditButton();
        });
    </script>

</body>
</html>