<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