JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <div class="wrap">
        <div class="accordion-box" id="accordion">
            <div class="accordion-item">
                <div class="accordion-header">
                    <span class="title">如何辦理退換貨？</span>
                    <i class="fa-solid fa-circle-chevron-down"></i>
                </div>
                <div class="accordion-content">
                    <p class="text">請參考退貨服務頁面。</p>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <span class="title">退款方式及退款時間？</span>
                    <i class="fa-solid fa-circle-chevron-down"></i>
                </div>
                <div class="accordion-content">
                    <p class="text">約7-8個工作天完成退款作業。</p>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <span class="title">未退回的退款，是否可直接折抵新訂單？</span>
                    <i class="fa-solid fa-circle-chevron-down"></i>
                </div>
                <div class="accordion-content">
                    <p class="text">很抱歉，重新訂購時無法直接於新訂單扣抵。</p>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <span class="title">發票遺失是否仍能辦理退換貨？</span>
                    <i class="fa-solid fa-circle-chevron-down"></i>
                </div>
                <div class="accordion-content">
                    <p class="text">很抱歉，需要有發票才能辦理退換貨。</p>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-header">
                    <span class="title">什麼情況無法辦理退換貨？</span>
                    <i class="fa-solid fa-circle-chevron-down"></i>
                </div>
                <div...

CSS

:root{
        --primary: #4f46e5;
        --secondary:#2563eb;
        --secondary100: #dbeafe;
        --gray800: #333;
        --white: #fff;
        --background:#e4e4e4;
        --warning100 :#ffedd5;
        --warning : #ea580c;
        --danger100 :#fee2e2;
        --danger : #dc2626;
        --success : #059669;
        --success100: #ecfdf5;
    }
    *{
        box-sizing: border-box;
        font-size: 1rem;
        line-height: 1.5;
        padding: 0;
        margin: 0;
    }
    body{
        background: linear-gradient(to right, #25c481, #25b7c4);
        color: var(--gray800);
        font-family: Lato, sans-serif;
    }
    .wrap{
        width: 50%;
        margin: 100px auto;
    }
    .accordion-box{
        width: 100%;
    }
    .accordion-item{
        margin-bottom: 1rem;
    }
    .accordion-header{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        background: var(--white);
        border-radius: 0.5rem;
        cursor: pointer;
        /* transition: ease-in-out 0.3s; */
    }
    .accordion-header i{
        transition: all 0.3s;
    }

    .accordion-content{
        background: var(--white);
        border-radius: 0 0 0.5rem 0.5rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height, padding 0.15s ease;
    }
    .is-open .accordion-header{
        background-color: var(--primary);
        color: var(--white);
        border-radius: 0.5rem 0.5rem 0 0 ;
        /* transition: ease-in 0.3s; */
    }
    .is-open .accordion-header i{
        transform: rotate(180deg);
        transition: all 0.3s;
    }
    .is-open .accordion-content{
        max-height: 50rem;
        padding: 1.5rem;
	      transition: max-height, padding 0.25s ease;
    }

JavaScript

let accordion = document.querySelector('#accordion');
        let accordionHeader = document.querySelectorAll('.accordion-header');
        
        accordionHeader.forEach(header => {
            header.addEventListener('click', (event)=>{
                let accordionList = header.parentElement;
                //可以讓accordion顯示隱藏，沒有is-open的加，有則隱藏(無判斷僅顯示點擊中的accordion)
                // accordionList.classList.toggle('is-open'); 
                // 判斷只顯示目前點擊的選項卡(另一個選項關閉)
            
                if(accordionList.classList.contains('is-open')){
                    accordionList.classList.remove('is-open');
                }else{
                    let accordionIsOpen = document.querySelectorAll('.is-open');
                    accordionIsOpen.forEach(item =>{
                        item.classList.remove('is-open');
                    })
                    accordionList.classList.add('is-open');
                }
            })
        });