JSFiddle - React, Tailwind, and code Playground

by pawangupta18

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

                <div class="upevent-head">
                   <h2>Frequently Asked Questions</h2>
                   <div class="double-line-bottom"></div>
               </div>
               <div class="about-text sec">
                    <div class="tab-sec">
                                                <div class="tab-1">
                            <div class="tab-btn">
                                <h3 class="act">What is the method behind the lessons? </h3>
                            </div>
                            <div class="tab-contant active">
                                <p>One of the reasons behind learning the language is to be able to communicate. There will be various topics like grammar, vocabulary and dialogues.  We will be starting with dialogues and then use it as the core and start discussing various topics.  We will also have various quizzes to revise and cover all the topics. </p>
                            </div>
                        </div>
                        
                                                          <div class="tab-1">
                            <div class="tab-btn">
                                <h3>I have some knowledge about studying English- how do I know where to start? </h3>
                            </div>
                            <div class="tab-contant">
                                <p>Put your level of learning under “my level” and then select beginner to advance and the dashboard will suggest a lesson best fit for your profile. You can even listen to the descriptions of the levels to see what suits your level. </p>
                            </div>
                        </div>
                        
                                                          <div class="tab-1">
                            <div class="tab-btn">
                                <h3>How can I develop fluency at...

CSS

.tab-contant.active {
    display: block;
}
.tab-contant {
    display: none;
}
.tab-sec {
    float: left;
    width: 100%;
}
.tab-btn {
    float: left;
    width: 100%;
    cursor: pointer;
    background-color: #ececec;
    padding: 10px 12px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin: 2px 0px;
}


.tab-contant {
    float: left;
    width: 100%;
    padding-left: 0px;
    border-left: 1px dotted #969494;
    margin-left: 10px;
}
.tab-btn h3 {
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    position: relative;
    margin: 0px;
    padding: 0px 0px 0px 31px;
    line-height: 17px;
}
.tab-contant p {
    font-size: 13px;
    text-align: justify;
    padding: 10px 24px;
}




.tab-btn h3:before {
    content: "\f067";
    font-family: FontAwesome;
    font-size: 12px;
    background: #43b24b;
    color: #fff;
    padding: 5px;
    /* margin-right: 10px; */
    position: absolute;
    left: 0px;
}
.tab-btn h3.act:before{
    content: "\f068";
    font-family: FontAwesome;
    font-size: 12px;
    background: #43b24b;
    color: #fff;
    padding: 5px;
    margin-right: 10px;
}

JavaScript

$( document ).ready(function() {      
$('.tab-btn').click(function(){
  $(this).siblings().slideToggle();
   $(this).parent().siblings().children('.tab-contant').slideUp();
   $(this).children('h3').toggleClass('act');
   $(this).parent().siblings().children('.tab-btn').children('h3').removeClass('act');
});
$('.tab-1:nth-child(1)').children('.tab-contant').addClass('active');
$('.tab-1:nth-child(1)').children('.tab-btn').children('h3').addClass('act');

// testimonial control left right arrow code start

    $('.texttimonail_next').on('click', function(event){
        event.preventDefault();
        $('.owl-prev').trigger('click');
    });
    
     $('.texttimonail_prev').on('click', function(event){
        event.preventDefault();
        $('.owl-next').trigger('click');
    });
    
	// testimonial control left right arrow code end
	
	$('.button-review').click(function(){
			$('.display-area') .stop() .slideToggle(1000);
			
		});
});