CSS&JS兩種方式實現手風琴式折疊菜單

<div class="accordion">
    <div id="one" class="section">
        <h3><a href="#one">折疊欄1</a></h3>
        <div id="image1" class="image"><img src=""></div>
    </div>
    <div id="two" class="section">
        <h3><a href="#two">折疊欄2</a></h3>
        <div id="image2" class="image"><img src=""></div>
    </div>
    <div id="three" class="section">
        <h3><a href="#three">折疊欄3</a></h3>
        <div id="image3" class="image"><img src=""></div>
    </div>
    <div id="four" class="section">
        <h3><a href="#four">折疊欄4</a></h3>
        <div id="image4" class="image"><img src=""></div>
    </div>
    <div id="five" class="section">
        <h3><a href="#five">折疊欄5</a></h3>
        <div id="image5" class="image"><img src=""></div>
    </div>
    <div id="six" class="section">
        <h3><a href="#six">折疊欄6</a></h3>
        <div id="image6" class="image"><img src=""></div>
    </div>
</div>

CSS3 利用  :target  偽類實現

.accordion h3+div{
    height: 0;
    overflow: hidden;/*超出部分隱藏*/
    transition: height 0.3s ease-in;/*展開的一種特效，以0.3s慢慢飛入*/
}

.accordion :target h3+div{
    height: 300px;
    overflow: auto;/*超過部分自動隱藏*/
}

 JS實現

function showSection(id) {
    var images=document.getElementsByClassName("image");
    for(var i=0;i<images.length;i++){
        if(images[i].getAttribute("id")!=id){
            images[i].style.display="none";
        }else{
            images[i].style.display="block";
        }
    }
}

function imagesHidden() {
    var images=document.getElementsByClassName("image");
    for(var i=0;i<images.length;i++){
        var id=images[i].getAttribute("id");
        document.getElementById(id).style.display="none";
    }
}
function addClick() {
    var sections=document.getElementsByClassName("section");
    for(var i=0;i<sections.length;i++){
        sections[i].onclick=function () {
            var showID=this.children[1].getAttribute("id");
            showSection(showID);
        }
    }
}