kisukedeath

New Custom Accordion Jquery

Apr 29th, 2016
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 4.72 KB | None | 0 0
  1. <style>    
  2.     /*----- Accordion -----*/
  3.     .accordion, .accordion * {
  4.         -webkit-box-sizing:border-box;
  5.         -moz-box-sizing:border-box;
  6.         box-sizing:border-box;
  7.     }
  8.  
  9.     .accordion {
  10.         overflow:hidden;
  11.         box-shadow:0px 1px 3px rgba(0,0,0,0.25);
  12.         border-radius:3px;
  13.         background:#f7f7f7;
  14.     }
  15.  
  16.     /*----- Section Titles -----*/
  17.     .accordion-section-title {
  18.         width:100%;
  19.         padding:12px;
  20.         display:inline-block;
  21.         border-bottom:1px solid #fff;
  22.         background:#890b10;
  23.         transition:all linear 0.15s;
  24.         /* Type */
  25.         font-size:1.200em;
  26.         text-shadow:0px 1px 0px #fff;
  27.         color:#fff;
  28.     }
  29.  
  30.     .accordion-section-title.active, .accordion-section-title:hover {
  31.         background: #d52229;
  32.         /* Type */
  33.         text-decoration:none;
  34.     }
  35.  
  36.     .accordion-section:last-child .accordion-section-title {
  37.         border-bottom:none;
  38.     }
  39.  
  40.     /*----- Section Content -----*/
  41.     .accordion-section-content {
  42.         padding:15px;
  43.         display:none;
  44.         overflow: auto;
  45.     }
  46.  
  47.     /*------ Height 100px -------*/
  48.     .accordion-section-content .columns.four {
  49.         height: 100px;
  50.     }
  51.  
  52.  
  53. </style>
  54.  
  55. <script>
  56.    
  57.     jQuery(document).ready(function() {
  58.  
  59.         function close_accordion_section(currentAttrValue) {
  60.  
  61.             jQuery('.accordion .accordion-section-title[href='+ currentAttrValue +']').removeClass('active');
  62.             jQuery('.accordion .accordion-section-title[href='+ currentAttrValue +']').next().slideUp(300).removeClass('open');
  63.         }
  64.  
  65.         jQuery('#accordion-1').prev().addClass('active');
  66.         jQuery('#accordion-1').css('display','block');
  67.  
  68.         jQuery('.accordion-section-title').click(function(e) {
  69.             // Grab current anchor value
  70.             var currentAttrValue = jQuery(this).attr('href');
  71.  
  72.             if(jQuery(e.target).is('.active')) {
  73.                 close_accordion_section(currentAttrValue);
  74.             }else {
  75.                 //close_accordion_section();
  76.  
  77.                 // Add active class to section title
  78.                 jQuery(this).addClass('active');
  79.                 // Open up the hidden content panel
  80.                 jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
  81.             }
  82.  
  83.             e.preventDefault();
  84.         });
  85. });
  86.  
  87. <div class="accordion">
  88.             <div class="accordion-section">
  89.                 <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
  90.                 <div id="accordion-1" class="accordion-section-content">
  91.                     <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
  92.                 </div><!--end .accordion-section-content-->
  93.             </div><!--end .accordion-section-->
  94.  
  95.             <div class="accordion-section">
  96.                 <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
  97.                 <div id="accordion-2" class="accordion-section-content">
  98.                     <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
  99.                 </div><!--end .accordion-section-content-->
  100.             </div><!--end .accordion-section-->
  101.  
  102.             <div class="accordion-section">
  103.                 <a class="accordion-section-title" href="#accordion-3">Accordion Section #3</a>
  104.                 <div id="accordion-3" class="accordion-section-content">
  105.                     <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
  106.                 </div><!--end .accordion-section-content-->
  107.             </div><!--end .accordion-section-->
  108.         </div><!--end .accordion-->
Advertisement
Add Comment
Please, Sign In to add comment