javascript

[java script + CSS] 토글 드롭다운

멈머이 2024. 1. 22. 23:42
728x90

 

* html

<body>
    <h1><b>F&Q</b></h1>
    <div class="qna_list_all">
        <ul class="qna_list1">
            <li>
                <button class="qna-button" onclick="toggleContent(this)">
                    <span>▶ 탑승 가능 인원</span>
                    <div class="answer">
                        * 최대 4명 <br>
                        * 적재하시는 짐의 사이즈와 갯수에 따라 탑승 가능 인원은 줄어들며, 카시트 지참이 필요한 영유아도 인원수에 포함 됩니다. <br>
                    </div>
                </button>
            </li>
            <li>
                <button class="qna-button" onclick="toggleContent(this)">
                    <span>▶ 요금 조정 및 환불</span>
                    <div class="answer">
                        * 날다는 플랫폼으로 호출을 취소하는 경우 취소수수료가 부과됩니다. <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;≫ 출발 전일 15시까지 : 수수료 없음 <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;≫ 출발 전일 15시~자정 : 요금의 50% <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;≫ 출발 당일 탑승 4시간 이전 : 요금의 80% <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;≫ 출발 당일 탑승 4시간 전 이후 & 노쇼(30분 초과) : 요금의 100% <br>
                        * 다만 서비스를 이용하심에 있어, 문제가 발생하셨거나 요금 관련 조정이 필요한 부분이 있다면 [문의하기] 를 통해 남겨주세요. <br>
                    </div>
                </button>
            </li>
            <li>
                <button class="qna-button" onclick="toggleContent(this)">
                    <span>▶ 반려동물 탑승</span>
                    <div class="answer">
                        * 날다는 반려동물과 동반 탑승이 가능합니다. <br>
                        * 단, 반드시 전용 이동장(케이지)를 이용해야 하며, 이동장을 지참하지 않을 시 탑승이 제한 됩니다.
                    </div>
                </button>
            </li>
        </ul>
    </div>
</body>

 

 

* CSS

.qna_list li {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .qna_list1 {
            display: flex;
            flex-direction: column;
            gap: 2vh;
            padding-left: 0vh;
        }

        .qna_list1 .qna-button {
            display: flex;
            cursor: pointer;
        }

        .qna-button {
            display: flex;
            flex-direction: column;
            cursor: pointer;
            padding: 10px;
            background-color: white;
            border: 1px solid white;
            margin-bottom: 5px;
            display: block;
            transition: color 0.3s ease; /* Add transition for smoother color change */
            color: black; /* Default text color */
        }
        
        .qna-button.active span {
            color: green; /* Change button text color when active */
        }
        
        .qna-button span {
            color: black; /* Color for the text inside the div */
        }
        
        .answer {
            width: 68vh;
            text-align: left;
            border: none;
            display: none;
            padding: 10px;
            background-color: whitesmoke;
            /* border: 1px solid #ccc; */
            border-radius: 1vh;
        }
        
        .answer.show {
            display: block; /* Show answer when the show class is present */
        }
        
        .qna-button {
            width: 67vh;
            border: none;
            background-color: none;
        }

 

 

* java script

    document.addEventListener("DOMContentLoaded", function () {
        const qnaButtons = document.querySelectorAll('.qna-button');

        qnaButtons.forEach(button => {
            button.addEventListener('click', function () {
                const answer = this.querySelector('.answer');
                answer.style.display = (answer.style.display === 'block') ? 'none' : 'block';
            });
        });
    });

 

728x90