js3-5

by wang_siang

HTML

<main>
        <div class="item">
            <button class="question">如何辦理退換貨？
                <span class="symbol">➕</span>
            </button>
            <div class="answer">
                <p>請參考退貨服務頁面。</p>
            </div>
        </div>
        <div class="item">
            <button class="question">退款方式及退款時間？
                <span class="symbol">➕</span>
            </button>
            <div class="answer">
                <p>約7-8個工作天完成退款作業。</p>
            </div>
        </div>
        <div class="item">
            <button class="question">未退回的退款，是否可直接折抵新訂單？
                <span class="symbol">➕</span>
            </button>
            <div class="answer">
                <p>很抱歉，重新訂購時無法直接於新訂單扣抵。</p>
            </div>
        </div>
        <div class="item">
            <button class="question">發票遺失是否仍能辦理退換貨？
                <span class="symbol">➕</span>
            </button>
            <div class="answer">
                <p>很抱歉，需要有發票才能辦理退換貨。</p>
            </div>
        </div>
        <div class="item">
            <button class="question">什麼情況無法辦理退換貨？
                <span class="symbol">➕</span>
            </button>
            <div class="answer">
                <p>超過7天退貨期限，就無法辦理。</p>
            </div>
        </div>

    </main>

CSS

* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background-color: #f9f9f9;
            padding: 20px;
        }
        

        main {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .item {
            margin-bottom: 20px;
        }

        .question {
            width: 100%;
            padding: 15px;
            text-align: left;
            color: #ffffff;
            background-color: rgb(33, 33, 33);
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;

            display: flex;
            justify-content: space-between;
        }

        .question:hover {
            background-color: rgb(56, 56, 56);
        }

        .answer {
            height: 0;
            display: flex;
            align-items: center;
            padding: 0 15px;
            background-color: #fafafa;
            border-left: 3px solid #ddd;
            overflow: hidden;
            transition: all 0.4s ease-in-out;
        }

        .answer.collapsed {
            height: 100px;
            padding: 15px;
        }

      

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }


            100% {
                transform: rotate(360deg);
            }
        }

JavaScript

const answerBtn = document.querySelectorAll('.question');

        answerBtn.forEach((btn) => {
            btn.addEventListener('click', expand)
        })

        function expand(event) {
            let answer = event.target.closest('div').querySelector('.answer');
            let symbol = event.target.closest('div').querySelector('.symbol');
            answer.classList.toggle('collapsed');

           symbol.style.animation='none';
           void symbol.offsetWidth;
           symbol.style.animation='rotate 0.5s ';

            if (answer.classList.contains('collapsed')) {
                symbol.textContent = '➖';
            }
            else {
                symbol.textContent = '➕';
            }
        }