Simple Accordion Alternative to JqueryUI
1) Load jquery and implement script
<script type="text/javascript"> $(document).ready(function($) { //Click Function $('.accordion').find('.accordion-toggle').click(function(){ //Expand or collapse this panel $(this).next().slideToggle('fast'); //Add Active Class & Remove Not-Active Class $(this).toggleClass('accord-active').toggleClass("not-active"); //Hide the other panels $(".accordion-content").not($(this).next()).slideUp('fast'); //Remove Active Class From Non-Selected And Re-Add Not-Active Class $(".accordion-toggle").not(this).removeClass("accord-active").addClass('not-active'); }); }); </script>
2) CSS, active and not-active classes, with background image Plus/minus Icon
/***accordion***/ .accordion{background: #f3f3f3;} .accordion-toggle {cursor: pointer;background-color: #1e2952;padding: 11px;text-align: left;color: #fff;border-bottom: 2px solid #3565b9;-webkit-transition:background-color 0.2s ease;transition: background-color 0.2s ease;} .accordion-toggle:hover {background-color: #3565b9;border-bottom: 2px solid #1e2952;text-align: left;color: #fff;-webkit-transition:background-color 0.2s ease;transition: background-color 0.2s ease;} .accordion-content {display: none;text-align:left;padding: 20px 40px;} .accordion h4.accord-active{padding-left:40px;background-color: #3565b9;border-bottom: 2px solid #1e2952;-webkit-transition:background-color 0.2s ease;transition: background-color 0.2s ease;background-image: url('../images/plus-minus-sprite.png');background-repeat:no-repeat;background-position: 13px -21px;background-size: 14px;margin-bottom: 0;margin-top: 0;} .accordion h4.not-active{margin-top:0;margin-bottom: 0px;padding-left:40px;background-image: url('../images/plus-minus-sprite.png');background-repeat:no-repeat;background-position: 13px 14px;background-size: 14px;left: 0;position: relative;} @media(max-width:768px){ .accordion-content p {font-size: 12px;font-weight: 500;} .accordion h4{font-size:12px;} .accordion-toggle{padding:17px;} }
3) On the Parent Resource put in call
<div class="accordion"> [[getResources? &parents=`[[*id]]` &tpl=`SimpleJqueryAccordTpl` &includeTVs=`1` &includeContent=`1` &showHidden=`1` &sortby=`menuindex` &sortdir=`ASC` &limit=`99` ]] </div>
4) Make SimpleJqueryAccordTpl Chunk
<h4 class="accordion-toggle not-active">[[+pagetitle]]</h4> <div class="accordion-content"> [[+content]] </div>
5) Now make some child question and answer resources under the Parent resource
Demo
Faq1
Cras malesuada ultrices augue molestie risus.
Faq2
Cras malesuada ultrices augue molestie risus.
Faq3
Cras malesuada ultrices augue molestie risus.
Get In Touch
Have a question? or perhaps spotted a problem?
Maybe you have something you would like to add. Drop us a line anytime!