jQuery Accordion

<style> .pointer {cursor:pointer;} .hide {display:none;} .column-wrapper {overflow:hidden;} /* Accordions */ .accordions {padding:30px 20px 60px; max-width: 1365px; margin:0 auto;} .accordion-content {display: none;} .accordion-content.default {display: block;} .accordion {border-bottom:solid 1px #c1c1c1;} .accordion .title { position: relative; color: #0096d6; padding: 10px 10px 10px 30px; margin: 10px 0 10px;} .accordion .title:hover {color:#a4dbf2;} .accordion .title:before {content:'\f054'; font-family:FontAwesome; font-size:14px; position:absolute; top:16px; left:0;} .accordion .title:hover:before {color: #0096d6;} .accordion.open .title:before {content:'\f078';} .accordion .body {padding: 30px 30px 20px;} .accordion.open .body {border-bottom:solid 1px #c1c1c1;} </style> <div class="panel accordions"> <div class="container"> <h2 class="section-title">Section Title</h2> <div class="accordion"> <div class="h4 title pointer">Title</div> <div class="body hide column-wrapper"></div> </div> </div> </div> <script> jQuery(document).ready(function($){ // ACCORDIONS $('.accordion').each(function(index, el) { $(el).find('.title').on('click', function() { $title = $(this); $(this).toggleClass('open'); $(el).toggleClass('open'); $(this).toggleClass('active').next('.body').slideToggle(function(){ $.fn.matchHeight._update(); // Need to have matchHeight js from BRM IO to run match height update function }); }); }); }); </script>
Plug in requires BRM IO's matchHeight js https://github.com/liabru/jquery-match-height
Basic accordion function. Replace the .accordion, .title, and .body classes to the fit your needs.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.