How to show blog posts listing as an accordian in x-cart?

If we want to show our blog posts listing as an accordian in x-cart then we use below jquery and css code.

<!----------- JS code ------------>
<script>
$('#faqlist .faq-heading').click(function(e) {
	e.preventDefault();
	$('#faqlist .faq-heading').removeClass('selected');
	$(this).addClass('selected');
});
</script>


<!----------- CSS code ------------>

<style>
#faqlist .faq-heading {
    border: 1px solid #ccc; margin-bottom: 5px;padding: 1%;
}
#faqlist .faq-heading .faq-trigger {
    cursor: pointer; font-size: 1.8rem; font-weight: 300; 
    margin:0;background: #003389 none repeat scroll 0 0;
    color: #fff; display: block;padding: 10px;
}
#faqlist .faq-heading .faq-content { 
    display: none; transition: opacity 1s ease-out; opacity: 0;
    visibility: hidden; 
}
#faqlist .faq-heading.selected .faq-content {
   display: block !important;margin-top: 10px;
   visibility: visible;opacity: 1;
}
.faq-category { 
   color: #333;  font-size: 20px;  margin: 1% auto; 
   padding: 1%;  text-align: center;  text-transform: uppercase;  width: 100%;
}

.faq-trigger {
    position: relative;display: block;
    margin: 1.6em 0 .4em; line-height: 1.2;
}
.faq-trigger::before, .faq-trigger::after {
    backface-visibility: hidden;  background: #ffffff none repeat scroll 0 0; 
    height: 2px;  position: absolute;  right: 24px;  top: 50%;  
    transition-duration: 0.2s;  transition-property: transform;
    width: 13px;  content: "";
}
.faq-trigger::before {    
    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);
     transform: rotate(45deg);    right: 32px; 
} 
.faq-trigger::after {
    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);  
}  
.selected .faq-trigger::before {
    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);  
}  
.selected .faq-trigger::after { 
   -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);
    transform: rotate(45deg);  
}
</style>



<!----------- HTML code ------------>

<div id="faqlist">

<div class="faq-heading">
	<a class="faq-trigger">Your Heading Here</a>

<div class="faq-content">Your Content Here</div>

    </div>


<div class="faq-heading">
	<a class="faq-trigger">Your Heading Here</a>

<div class="faq-content">Your Content Here</div>

    </div>

</div>