<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.
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.