CSS and JS are two ways to implement the accordion folding menu. css tutorial

CSS and JS are two ways to implement the accordion folding menu. css tutorial
<Div class = "accordion"> <div id = "one" class = "section">

CSS3 exploitation: target pseudo class implementation

. Accordion h3 + div {height: 0; overflow: hidden;/* Hide the excess part */transition: height 0.3 s hide-in;/* a special effect to expand, take 0.3s to fly slowly */}. accordion: target h3 + div {height: 300px; overflow: auto;/* automatically hide excess parts */}View Code JS implements 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 );}}}View Code