Css&js two ways to achieve accordion-style folding menu

<Divclass= "Accordion">    <DivID= "One"class= "section">        <H3><ahref= "#one">Folding Bar 1</a></H3>        <DivID= "Image1"class= "image"><imgsrc=""></Div>    </Div>    <DivID= "both"class= "section">        <H3><ahref= "#two">Folding Bar 2</a></H3>        <DivID= "Image2"class= "image"><imgsrc=""></Div>    </Div>    <DivID= "three"class= "section">        <H3><ahref= "#three">Folding Bar 3</a></H3>        <DivID= "Image3"class= "image"><imgsrc=""></Div>    </Div>    <DivID= "Four"class= "section">        <H3><ahref= "#four">Folding Bar 4</a></H3>        <DivID= "Image4"class= "image"><imgsrc=""></Div>    </Div>    <DivID= "Five"class= "section">        <H3><ahref= "#five">Folding Bar 5</a></H3>        <DivID= "Image5"class= "image"><imgsrc=""></Div>    </Div>    <DivID= "Six"class= "section">        <H3><ahref= "#six">Folding Bar 6</a></H3>        <DivID= "Image6"class= "image"><imgsrc=""></Div>    </Div></Div>

View Code

CSS3 using: Target Pseudo-class implementation

 .accordion h3+div  { height :  0 ;  overflow :  hidden ; /*   out of section hidden  */  transition :  height 0.3s ease-in ; /*   unfold an effect that slowly flies into the  in 0.3s */} .accordion:target h3+div  {:  300px ;  overflow :  auto ; /*   over-partially auto-hide  */} 

View CodeJS implementation

functionshowsection (ID) {varImages=document.getelementsbyclassname ("image");  for(vari=0;i<images.length;i++){        if(Images[i].getattribute ("id")! =ID) {Images[i].style.display= "None"; }Else{Images[i].style.display= "Block"; }    }}functionImageshidden () {varImages=document.getelementsbyclassname ("image");  for(vari=0;i<images.length;i++){        varId=images[i].getattribute ("id"); document.getElementById (ID). style.display= "None"; }}functionAddClick () {varSections=document.getelementsbyclassname ("section");  for(vari=0;i<sections.length;i++) {Sections[i].onclick=function () {            varShowid= This. Children[1].getattribute ("id");        Showsection (SHOWID); }    }}

View Code

Css&js two ways to achieve accordion-style folding menu