advanced code snippet search

Posted By

reynish on 09/15/11


Tagged

css html jquery accordion


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

spee66


My accordions

 / Published in: jQuery
 
Expand | Embed | Plain Text 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. <script class="jsbin" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
  6. -->
  7. <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  8. <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  9. <meta charset=utf-8 />
  10. <title>JS Bin</title>
  11. <!--[if IE]>
  12.   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  13. <![endif]-->
  14. <style>
  15. article, aside, figure, footer, header, hgroup, 
  16. menu, nav, section { display: block; }
  17.  
  18. h3 { margin: 0; padding: 10px 0;}
  19.  
  20.  
  21. /*     ACCORDION STYLES     */ 
  22. .accordionSection {
  23.   overflow: hidden;
  24.   margin-bottom: 10px;
  25.   border-radius: 3px;
  26.   border: 1px solid #d5d5d5;  
  27. }
  28.  
  29. .accordionSection.open {
  30.   background-color: #E5F6FF;
  31. }
  32.  
  33. .accordionSection:hover {
  34.   border-color: #C6E5F8;
  35. }
  36.  
  37. .accordionTitle {
  38.   margin: 0;
  39.   padding: 5px 20px;
  40.   cursor: pointer;
  41.   color: #004FB6;
  42.   /*background-image: url(../images/plus-minus.png);*/
  43.   background-image: url(http://localhost:3000/Content/css/../images/plus-minus.png);
  44.   background-repeat: no-repeat; 
  45.   background-position: 97% -54px;   
  46. }
  47.  
  48. .accordionSection.open .accordionTitle{
  49.   background-position: 97% 11px;
  50. }
  51.  
  52. .accordionTitle:hover {
  53.   background-color: #E5F6FF;
  54. }
  55.  
  56. .accordionTitle h3 { padding: 0; display: inline-block; min-width: 160px; margin-right: 20px; }
  57. .ie6 .accordionTitle h3 { min-width: 160px; width: auto; }
  58.  
  59. .accordionContent {
  60.   margin: 0;    
  61.   padding: 0 20px;
  62. }
  63.  
  64. /*     ACCORDION BEHAVIOURS     */
  65. /* Hide accordion content in closed sections */
  66. .accordionSection.closed .accordionContent{
  67.   display: none;
  68. }
  69. /* Fix for parents & children */
  70. .accordionSection.open .accordionSection.closed .accordionContent {
  71.   display: none;
  72. }  
  73. /* Show accordion content in open sections */ 
  74. .accordionSection.open .accordionContent {
  75.   display: block;
  76. }
  77. /* Fix for parents & children */
  78. .accordionSection.closed .accordionSection.open .accordionContent{
  79.   display: block;
  80. }
  81.  
  82.  
  83.  
  84. </style>
  85. </head>
  86. <body>
  87. <section class="accordionSection closed">
  88.     <div class="accordionTitle">
  89.         <h3>accordionTitle</h3>
  90.     </div>
  91.     <div class="accordionContent">
  92.         <h3>Accordion title</h3>
  93.         <p>Just some content</p>
  94.     </div>
  95. </section>
  96.  
  97. <section class="accordionSection open">
  98.     <div class="accordionTitle">
  99.         <h3>accordionTitle</h3>
  100.     </div>
  101.     <div class="accordionContent">
  102.         <h3>Accordion title</h3>
  103.         <p>Just some content</p>
  104.     </div>
  105. </section>
  106.  
  107. <section class="accordionSection closed">
  108.     <div class="accordionTitle">
  109.         <h3>accordionTitle</h3>
  110.     </div>
  111.     <div class="accordionContent">
  112.         <h3>Accordion title</h3>
  113.         <p>Just some content</p>
  114.         <section class="accordionSection closed">
  115.             <div class="accordionTitle">
  116.                 <h3>accordionTitle</h3>
  117.             </div>
  118.             <div class="accordionContent">
  119.                 <h3>Accordion title</h3>
  120.                 <p>Just some content</p>
  121.             </div>
  122.         </section>
  123.         <section class="accordionSection closed">
  124.             <div class="accordionTitle">
  125.                 <h3>accordionTitle</h3>
  126.             </div>
  127.             <div class="accordionContent">
  128.                 <h3>Accordion title</h3>
  129.                 <p>Just some content</p>
  130.             </div>
  131.         </section>      
  132.     </div>
  133. </section>
  134.  
  135. <script>
  136.  
  137. $.fn.showAccordion = function() {
  138.  
  139. }
  140.  
  141. $(document).ready(function(){
  142.  
  143.     $(".accordionTitle").click(function(event) {
  144.         // Cache some shizzle
  145.         var thisTitle = $(this);
  146.         var thisContent = thisTitle.next(".accordionContent");
  147.         var thisParent = thisTitle.parent(".accordionSection");
  148.         var thisSiblings = thisParent.siblings(".accordionSection");
  149.  
  150.         // Close sibling accordion sections
  151.         thisSiblings.each(function(){
  152.           if ($(this).is(".open")) {
  153.               $(this).switchClass("open", "closed");
  154.               $(this).children(".accordionContent").slideUp(150);
  155.           } 
  156.         });
  157.  
  158.         // Show this accordion section
  159.         if (thisParent.is(".closed")) {
  160.             thisParent.removeClass("closed").addClass("open");
  161.             thisContent.slideDown(150);
  162.         } else {
  163.             thisParent.removeClass("open").addClass("closed");
  164.             thisContent.slideUp(150);
  165.         }
  166.  
  167.     });
  168.  
  169. });
  170. </script>
  171.  
  172. </body>
  173. </html>

Report this snippet  

You need to login to post a comment.