JavaScript for accordion picture switch case

This article is mainly to share with you the JavaScript implementation of the accordion picture switch case, I hope to help everyone, first watch the transition effect:

1. Toggle Effect:

2. JavaScript for structural logic grooming:

(function () {var con = document.getelementsbyclassname (' hm_icr_tr ') [0]; Package Layer box var Aspan = con.getelementsbyclassname (' Hmii_item_chover '); Click the Interactive box var items = con.getelementsbyclassname (' Hm_itr_item ');  Each movement of the large box var contents = con.getelementsbyclassname (' hmii_item_content ');    The text content of the Movement big box is var clickindex = 0;for (var i=0;i<aspan.length;i++) {aspan[i].index = i;        Aspan[i].onmouseover = function () {//To determine the order of points clickindex = This.index;            for (Var j=0;j<items.length;j++) {items[j].style.width = + ' px ';            contents[j].style.transition = ' 0s ';            contents[j].style.opacity = 0;        aspan[j].style.opacity = 1;        }//Box Items[this.index].style.width = + ' px ';    Current click block this.style.opacity = 0;    }}//motion End Event listener for (Var i=0;i<items.length;i++) {items[i].num = i;       Items[i].addeventlistener (' Transitionend ', function (EV) {console.log (clickindex); Contents[clickindex].style.transItion = '. 8s ';    contents[clickindex].style.opacity = ' 1 '; });} })();

3. Html,css is likely to be messy, but its core implementation is the above simple sentence JS logical statement processing completed, in my opinion the case of its programming the most important idea is to clear all, specify the current,

or specify specific element-specific behavior.

4. As a front-end small white, to be able to integrate into the IT blog communication is a very pleasant thing, I hope I can persist, continue to write down. Of course, I hope all the great God, thank you very much!

5. Since the previous blog is published on Sina Blog: Click to open the link, so after the blog content migration to CSND, the front many pictures click into will automatically jump to Sina blog! Very happy to come to CSDN, become a member of everyone!