Faq Accordion

by Rupom Khondaker

HTML

<div id="faqs-container" class="lifetime-faq">
	<!--Faq-group-->
	
    <h3 class="faq-titile"><span>Group One</span></h3>
    <div class="lifetime-faq faq-subgroup">
        <h3 class="faq-titile"><span>Question one</span></h3>
        <p class="faq-answer">When preparing to sauté or fry, preheat your cookware a minute or two on a low setting.</p>
        <h3 class="faq-titile"><span>Question Two</span></h3>
        <p class="faq-answer">When preparing to sauté or fry, preheat your cookware a minute or two on a low setting.</p>
    </div>
	<!--/Faq-group-->
	
	<!--Faq-group-->
    <h3 class="faq-titile"><span>Group Two</span></h3>
    <div class="lifetime-faq faq-subgroup">
        <h3 class="faq-titile"><span>Question two</span></h3>
        <p class="faq-answer">When preparing to sauté or fry, preheat your cookware a minute or two on a low setting.</p>
        <h3 class="faq-titile"><span>Question two</span></h3>
        <p class="faq-answer">When preparing to sauté or fry, preheat your cookware a minute or two on a low setting.</p>
    </div>
	<!--/Faq-group-->
	<!--Faq-group-->
    <h3 class="faq-titile"><span>Group Three</span></h3>
    <div class="lifetime-faq faq-subgroup">
        <h3 class="faq-titile"><span>Question Three</span></h3>
        <p class="faq-answer">When preparing to sauté or fry, preheat your cookware a minute or Three on a low setting.</p>
        <h3 class="faq-titile"><span>Question Three</span></h3>
        <p class="faq-answer">When preparing to sauté or fry, preheat your cookware a minute or Three on a low setting.</p>
    </div>
	<!--/Faq-group-->
</div>

CSS

.faq-titile {
    background: #e4e4e4;
    margin: 2px;
  }
.faq-subgroup {
    margin: 0 0 0 5px;
 }
.faq-answer {
    border: 1px solid #ddd;
    padding: 5px;
    margin: 0 5px;
}

.faq-titile.ui-state-active {
    background: #105d8c;
    color: #fff;
  }
  
.ui-icon.iconOpen {
    background:url('http://www.lifetimetech.com/wp-content/uploads/2016/09/down-arrow.png') no-repeat;
    background-size:20px;
    width:20px;
    height:20px;
}
.ui-icon.iconClosed {
    background:url('http://www.lifetimetech.com/wp-content/uploads/2016/09/down-arrow.png') no-repeat -5px;
    background-size:30px;
    width:20px;
    height:20px;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    right: .5em!important;
}

JavaScript

$(".lifetime-faq").accordion({
    autoHeight: false,
    collapsible: true,
    active: false
});

 $(function () {
     var icons = {
         header: "iconClosed",    // custom icon class
         activeHeader: "iconOpen" // custom icon class
     };
     $(".lifetime-faq").accordion({
         icons: icons
     });
 });