基于jQuery多层次的手风琴代码

基于jQuery多层次的手风琴代码是一款经过美化的多级多层次手风琴特效代码。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<aside class="accordion">
       <h1>News</h1>
       <div class="opened-for-codepen">
           <h2>News Item #1</h2>
           <div class="opened-for-codepen">
               <h3>News Item #1a</h3>
               <div>
                   <h4>News Subitem 1</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                   <h4>News Subitem 2</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                   <h4>News Subitem 3</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
               </div>
               <h3>News Item #1b</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
               <h3>News Item #1c</h3>
               <div class="opened-for-codepen">
                   <h4>News Subitem 1</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                   <h4>News Subitem 2</h4>
                   <p class="opened-for-codepen">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
               </div>
           </div>
           <h2>News Item #2</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           <h2>News Item #3</h2>
           <div>
               <h3>News Item #3a</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
               <h3>News Item #3b</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           </div>
       </div>
       <h1>Updates</h1>
       <div>
           <h2>Update #1</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           <h2>Update #2</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           <h2>Update #3</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           <h2>Update #4</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
       </div>
       <h1>Miscellaneous</h1>
       <div>
           <h2>Misc. #1</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           <h2>Misc. #2</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
           <h2>Misc. #3</h2>
           <div>
               <h3>Misc. Item #1a</h3>
               <div>
                   <h4>Misc. Subitem 1</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                   <h4>Misc. Subitem 2</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                   <h4>Misc. Subitem 3</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
               </div>
               <h3>Misc. Item #2a</h3>
               <div>
                   <h4>Misc. Subitem 1</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                   <h4>Misc. Subitem 2</h4>
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
               </div>
           </div>
       </div>
   </aside>

via：http://www.w2bc.com/article/jquery-accordion-tab

时间： 2024-10-12 21:06:05

基于jQuery多层次的手风琴代码的相关文章

基于jQuery移动设备图片裁剪代码

一款基于jQuery移动设备图片裁剪代码.这是一款支持移动设备触摸手势的jQuery图片裁剪插件jquery.photoClip.效果图如下: 在线预览   源码下载 实现的代码. html代码: <article class="zzsc-container"> <div id="clipArea"></div> <input type="file" id="file"> <

基于jQuery垂直多级导航菜单代码

基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce"> <li> <a class="xz" href="#">目录A</a> </li> <li> <a href="#">目录B <img class=&qu

基于jQuery HTML5添加到购物车代码

基于jQuery HTML5添加到购物车代码.这是一款支持选择颜色跟样式的添加购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header> <h1>Quick Add to Cart</h1> </header> <a href="#0" class="cd-cart"> <span>0</span> </a> <ul class

基于jQuery在线问卷答题系统代码

分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="demo"> <div id='quiz-container'> </div> </div> js代码: var init = { 'questions': [{ 'question': 'jQuery是什么?', 'answers'

基于jquery右侧悬浮加入购物车代码

分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览   源码下载 实现的代码: <!--左侧产品parabola.js控制--> <div class="main"> <div id="plist"> <ul> <li> <div class="lh_wrap"> <div class="

基于jQuery图片自适应排列显示代码

基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="max-width:900px;margin:auto;padding:0 10px"> <h3>演示样式一</h3> </div> <div style="max-width:908px;margin:auto;p

基于jQuery左右滑动切换图片代码

分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_out v_out_p"> <div class="prev"> <a href="javascript:void(0)"></a> </div> <div class="v_show"

基于jQuery倾斜打开侧边栏菜单代码

基于jQuery多重图片无限循环动画效果.这是一款非常实用的jQuery多图片无限循环动画特效插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="paper-back"> <nav> <div class="close"></div> <a href="#">Home</a> <a href="#">Ab

基于jQuery实现文字倾斜显示代码

这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="logo"> <img src="images/frame.png" alt=