Simple and practical bootstrap jquery Accordion plugin _jquery

front-end

jquery.accordion.js Code

* * Jquery.accordion 0.0.1 * Copyright (c) 2015 Lengziyu http://lengziyu.com/* DATE:2015-10-10 * *; (function ($) {$.fn.accordion = function (opts) {//default value var defaults = {max: "620px", min: "140px", Speed: "1000"} var
opts = $.extend (defaults, opts); This.each (function () {var div = $ (this),//$ (". Accordion"). Accordion (". Accordion") This element here is div ul = Div.children ()
,//Here is the UL element li = Ul.children ();//Here is the Li element//alert (div.html () + "," + ul.html () + "," + li.html ());
Triggers the event Ul.find (". Active a"). Hide ()//Hides a label//alert (Ul.find (". Active a"). length);
/* fadeout (): Fades the Animate () method to perform a custom animation of the CSS property set. This method changes the element from one state to another through a CSS style.
CSS property values are gradually changed, so you can create animation effects. Only numeric values can create animations (such as "margin:30px").
String values cannot create animations (such as "background-color:red"). $ (selector). Animate (Styles,speed,easing,callback) $ (selector). Animate (Styles,options) find ()
method to get all the first-level descendants of each element in the current element collection to search for the descendant span element in all paragraphs and set its color to red: $ ("P"). FIND ("span"). CSS (' Color ', ' red '); Siblings () obtains all compatriots (same level) that match each element of the collection *//mouse into the Li trigger Ul.on ("MouseEnter", "Li", function (){//$ (this) represents an LI element $ (this). addclass (' active '). Animate ({Width:opts.max}, Opts.speed). Find ("a"). Fadeout (). Parent ().
Siblings (). Removeclass (' active '). Animate ({width:opts.min}, Opts.speed). Find ("a"). Show (); })}) (JQuery);

partial CSS styles

*{padding:0 margin:0;} ul li{list-style:none float:left; accordion{; width:1180px; height:
375px;
margin:0 Auto; }. accordion ul li{background-repeat:no-repeat; float:left; width:140px; height:350px; cursor:default; accordion UL li.active{width:620px. Accordion ul. item1{Background-image:url (...
/img/pic1.jpg); }. Accordion ul. item2{Background-image:url (...
/img/pic2.jpg); }. Accordion ul. item3{Background-image:url (...
/img/pic3.jpg); }. Accordion ul. item4{Background-image:url (...
/img/pic4.jpg); }. Accordion ul. item5{Background-image:url (...
/img/pic5.jpg); }. Accordion ul li a{display:block; width:140px height:350px; cursor:default; accordion item1 ul a{background-i Mage:url (..
/img/pics1.jpg); }. Accordion ul. item2 a{Background-image:url (...
/img/pics2.jpg); }. Accordion ul. item3 a{Background-image:url (...
/img/pics3.jpg); }. Accordion ul. item4 a{Background-image:url (...
/img/pics4.jpg); }. Accordion ul. ITEM5 a{BackgrouNd-image:url (..
/img/pics5.jpg);  }

The above is a small set to introduce the concise and practical bootstrap jquery accordion plug-ins, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!