FAQ accordion without plugins: using html, css and JQuery

If you want to create a FAQ (Frequently Asked Question) page and want to show the Question & Answers in Accordion ( click and open), then you can use this code. Though there are plugins for that, but here I am sharing you the basic FAQ accordion html css and JQuery code so that you can use it without the use of plugins. Feel Free to message me in Skype if you need help.

JQuery Part

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>

	jQuery(document).ready(function(){
		 
jQuery('.faq-accordion .faq-content-container').hide();
jQuery('.faq-accordion > div:eq(0) .faq-accordion-title').addClass('active').next().slideDown();
jQuery('.faq-accordion .faq-accordion-title').click(function(j) {
    var dropDown2 = jQuery(this).closest('div').find('.faq-content-container');
    jQuery(this).closest('.faq-accordion').find('.faq-content-container').not(dropDown2).slideUp();
    if (jQuery(this).hasClass('active')) {
        jQuery(this).removeClass('active');
    } else {
        jQuery(this).closest('.faq-accordion').find('.faq-accordion-title').removeClass('active');
        jQuery(this).addClass('active');
    }
    dropDown2.stop(false, true).slideToggle();
    j.preventDefault();
});			
	
 }); 		
</script>	

CSS Part

<style>
.faq-accordion{background:rgba(21,20,21,.8);border-bottom:none}
.faq-accordion p{color:white;}
.main-faq-accordion{position:relative;padding:140px 0;background:linear-gradient(to right,#17161a,#242124 50%,#17161a)}
.faq-accordion-box .faq-accordion-title{padding:12px 50px 11px 40px;border-top:1px solid rgba(255,255,255,.05);color:#fff;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;position:relative;cursor:pointer;margin:0;box-sizing:border-box;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);-webkit-transition:color .2s ease-out,background-color .2s ease-out;-moz-transition:color .2s ease-out,background-color .2s ease-out;transition:color .2s ease-out,background-color .2s ease-out}
.faq-accordion-title .faq-accordion-mark{position:absolute;top:50%;right:40px;transform:translate(0,-50%);color:#fff;font-size:18px;transition:.3s}
.faq-accordion-title:hover .faq-accordion-mark,.faq-accordion-title.active .faq-accordion-mark{transform:translate(0,-50%) rotate(45deg)}
.faq-accordion .faq-accordion-box:first-child .faq-accordion-title{border-top:none}
.faq-accordion .faq-content-container{border-top:1px solid transparent;padding:30px 40px 48px 41px}
.faq-accordion .faq-content-container p{font-size:15px;margin-bottom:0}
.faq-accordion-title.active~.faq-content-container{border-color:#ff0e1f}
</style>	

HTML Part

<div class="faq-accordion">
    <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 1</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>1st Question Answer  </p>
        </div>
    </div>
	
 
	     <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 2</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>2nd Question Answer</p>
        </div>
    </div>
	 
	     <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 3</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>3rd Question Answer</p>
        </div>
    </div>
	   
	 
	 
</div>