Simple accordion Effect Based on jquery _ jquery-js tutorial

This article describes how to implement simple accordion effects based on jquery. For more information, see the accordion effect, in this example, J describes jquery's simple accordion special effect code. Share it with you for your reference. The details are as follows:
The running effect is as follows:

The Code is as follows:

Css style

/* CSS Document */body {margin: 0 auto; padding: 0 auto; font-size: 9pt; font-family:,, Arial, Helvetica, Verdana, sans-serif ;}. accordion {padding-left: 0px ;}. accordion li {border-top: 1px solid #000; list-style-type: none ;}. titlemenu {width: 100%; height: 30px; background-color: # F2F2F2; padding: 5px 0px; text-align: left; cursor: pointer ;}. titlemenu img {position: relative; left: 20px; top: 5px ;}. titlemenu span {display: inline-block; position: relative; left: 40px ;}. submenu {text-align: left; width: 100%; padding-left: 0px ;}. submenu li {list-style-type: none; width: 100% ;}. submenu li img {position: relative; left: 20px; top: 5px ;}. submenu li a {position: relative; left: 40px; top: 5px; text-decoration: none ;}. submenu li span {display: inline-block; height: 30px; padding: 5px 0px ;}. hover {background-color: #4A5B79 ;}

Custom js

(Function ($) {piano = function () {_ menu = '[{"title": "level-1 directory", "img": "images/cog.png ", "submenu": [{"title": "Level 2 directory", "img": "images/monitor_window_3d.png" },{ "title": "Level 2 directory", "img ": "images/monitor_window_3d.png" },{ "title": "Level 2 directory", "img": "images/monitor_window_3d.png" },{ "title": "Level 1 directory ", "img": "images/cog.png", "submenu": [{"title": "Level 2 directory", "img": "images/monitor_window_3d.png "}, {"title": "Level 2 directory", "img": "images/monitor_window_3d.png" },{ "id": "4", "title": "Level 2 directory ", "img": "images/monitor_window_3d.png"}] '; return ep = {init: function (obj) {_ menu = eval (' + _ menu + ') '); var li = ""; $. each (_ menu, function (index, element) {li + ='
'+ Element. title +'
'; If (element. submenu! = Null) {li + ='
  
  

    '; $. Each (element. submenu, function (ind, ele) {li + =' 
   
'+ Ele. title +'
';}); Li + =' 
  
';} Li + ='
';}); Obj. append (li) ;}}$. fn. accordion = function (options) {var pia = new piano (); pia. init ($ (this); return this. each (function () {var accs = $ (this ). children ('lil'); accs. each (reset); accs. click (onClick); var menu_li = $ (". submenu "). children ("li"); menu_li.each (function (index, element) {$ (this ). mousemove (function (e) {$ (this ). siblings (). removeClass ("hover"); $ (this ). find ("a" ).css ("color", "# fff"); $ (this ). siblings (). find ("a" ).css ("color", "#000"); $ (this ). addClass ("hover") ;}) ;};}) ;}function onClick () {$ (this ). siblings ('lil '). find ("ul "). each (hide); $ (this ). find ("ul "). slideDown ('normal'); return false;} function hide () {$ (this ). slideUp ('normal');} function reset () {$ (this ). find ("ul "). hide () ;}}) (jQuery );

Html call Method

 Untitled document