JavaScript - 간단한 아코디언 효과 적용(transition)

CSS 소스

<style>
    h3,
    div {
        margin: 0px;
        width: 80%;
        border: 2px solid #334455;
        box-sizing: border-box;
    }
    h3 {
        background: powderblue;
    }
    div {
        transition: 1s;
        position: relative;
        height: 100px;
        overflow: hidden;
    }
    .hidden {
        opacity: 0;
        height: 0px;
    }
    .show {
        opacity: 100;
        height: 100px;
    }
</style>

 

HTML 소스

<h2>아코디언 기능</h2>
<h3 onclick="changeView();">오늘은 자바스크립트 CSS 적용하는 날</h3>

<div class="hidden">
    오늘은 자바스크립트 CSS 적용<br />
    오늘은 자바스크립트 CSS 적용<br />
    오늘은 자바스크립트 CSS 적용
</div>

 

스크립트 소스

<script>
    function changeView() {
        var divEle = document.querySelector("div");
        var cls = divEle.getAttribute("class");

        if (cls == "hidden") {
            cls = "show";
        } else {
            cls = "hidden";
        }

        divEle.setAttribute("class", cls);
    }
</script>

 

결과