Effect: http://hovertree.com/texiao/jquery/65/
:
Code:
<!DOCTYPE HTML><HTMLLang= "zh"><Head><MetaCharSet= "UTF-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"><title>jquery Flat UI Design vertical accordion effects-how to ask</title><BaseTarget= "_blank" /><Linkrel= "stylesheet"type= "Text/css"href= "Http://hovertree.com/texiao/jquery/65/css/normalize.css" /><Linkrel= "stylesheet"type= "Text/css"href= "Http://hovertree.com/texiao/jquery/65/css/demo.css"><!--Necessary Styles -<Linkrel= "stylesheet"href= "Http://hovertree.com/texiao/jquery/65/css/style.css"></Head><Body><Divclass= "Accordion"><Divclass= "Item"><imgsrc= "Http://hovertree.com/texiao/jquery/65/img/Location-Pin.png"alt=""><H3>Location</H3></Div><P>What are you asking about the special effects library?<ahref= "http://hovertree.com/">Home</a>-<ahref= "http://hovertree.com/texiao/">Special Effects Library</a>-<ahref= "http://hovertree.com/texiao/jquery/65/">Accordion</a></P><Divclass= "Item"><imgsrc= "Http://hovertree.com/texiao/jquery/65/img/Headphones.png"alt=""><H3>Music</H3></Div><P>Nice music.<AudioControls= "Controls"src= "Http://cms.hovertree.com/hovertreesound/hwqxnl.mp3"></Audio></P><Divclass= "Item"><imgsrc= "Http://hovertree.com/texiao/jquery/65/img/Lightbulb.png"alt=""><H3>Notes</H3></Div><P>Influenced by the shop,<ahref= "Http://hovertree.com/h/bjaf/6sm1esjw.htm">Clothing Store</a>The business has gradually declined, the boss to ask what to talk about, is probably ready to buy the trend with the Internet, let him ask how to prepare, to open online shop, to create a website for the clothing store.</P><Divclass= "Item"><imgsrc= "Http://hovertree.com/texiao/jquery/65/img/Bookmarks.png"alt=""><H3>Books</H3></Div><P>Ebook:<BR/><ahref= "Http://hovertree.com/h/bjaf/246k8ygw.htm">Http://hovertree.com/h/bjaf/246k8ygw.htm</a> <BR/><ahref= "Http://hovertree.com/h/bjaf/dianzishu.htm">ebook Effects</a></P><Divclass= "Item"><imgsrc= "Http://hovertree.com/texiao/jquery/65/img/Lightning-Bolt.png"alt=""><H3>Tendances</H3></Div><P>Burn it, what's the question?<ahref= "Http://hovertree.com/h/bjaf/xmrvjvng.htm">Look</a></P></Div><Divclass= "Hovertreeinfo"><ahref= "Http://hovertree.com/h/bjaf/vk9yjrpm.htm">Original</a> <ahref= "Http://hovertree.com">Home</a> <ahref= "http://hovertree.com/texiao/">Effects</a></Div><Scriptsrc= "Http://down.hovertree.com/jquery/jquery-1.12.3.min.js"type= "Text/javascript"></Script><Scripttype= "Text/javascript">(function ($) {'Use Strict';$('. Item'). On ("Click", function () {$( This). Next (). Slidetoggle ( -);$('P'). Not ($ ( This). Next ()). Slideup ('Fast');});} (JQuery));</Script></Body></HTML>
Transferred from: http://hovertree.com/h/bjaf/vk9yjrpm.htm
Special effects: http://www.cnblogs.com/roucheng/p/texiao.html
jquery realizes vertical accordion effect of mobile phone