PPTING

접혔다 폈다하는 아코디언 메뉴 구현 본문

html & css & javascript

접혔다 폈다하는 아코디언 메뉴 구현

PPTING 2021. 3. 16. 14:02

See the Pen Untitled by areum (@areuminggg) on CodePen.

 

 

간단한 아코디언메뉴

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Menu</title>
    <style>
        #Accordion_wrap {
            padding: 10px;
        }
        .accordion_box:nth-child(1) .que {
            border-top: 1px solid rgb(0, 0, 0);
        }
        .que {
            font-size: 18px;
            font-weight: bold;
            padding: 10px;
            border-bottom: 1px solid rgb(203, 203, 203);
            cursor: pointer;
            position: relative;
        }
        .que:hover{
            text-decoration: underline;
        }
        .que::before {
            content: 'Q: ';
        }
        .que::after {
            content: '+';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        .on .que::after {
            content: '-';
        }
        .anw {
            display: none;
            font-size: 16px;
            background-color: #f0f0f0;
            color: rgb(93, 93, 93);
            padding: 10px;
        }
        .on .anw {
            display: block;
        }
        .anw::before {
            content: 'A: ';
        }
    </style>
</head>
<body>
    <h1>Accordion Menu</h1>
    <div id="Accordion_wrap">
        <div class="accordion_box">
            <div class="que">This is first question.</div>
            <div class="anw">This is first answer.</div>
        </div>
        <div class="accordion_box">
            <div class="que">This is second question.</div>
            <div class="anw">This is second answer.</div>
        </div>
        <div class="accordion_box">
            <div class="que">This is third question.</div>
            <div class="anw">This is third answer.</div>
        </div>
    </div>
</body>
<script>
(function() {
    var box = document.querySelectorAll('.accordion_box');
    for (var i = 0; i < box.length; i++) {
        box[i].addEventListener('click', function() {
            accordion(this);
        })
    }
})()
function accordion(elem) {
    if (document.querySelector('.accordion_box.on')) {
        document.querySelector('.accordion_box.on').classList.remove('on');
    }
    if (elem.classList.contains('on')) {
        elem.classList.remove('on');
    } else {
        elem.classList.add('on');
    }
}
</script>
</html>
저작자표시 비영리 변경금지 (새창열림)

'html & css & javascript' 카테고리의 다른 글

로그인 2) 로그인 유효성 검사하기 CSS Input Text examples  (0) 2023.09.07
로그인 1) CSS Input Text examples  (0) 2023.09.04
제이쿼리, 자바스크립트 없이 input radio, checkbox 수정  (0) 2023.09.04
접혔다 폈다하는 간단한 아코디언 메뉴 Accodian menu  (0) 2023.08.25
'html & css & javascript' Related Articles more