<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main-content"> <!--- here defines your page main content ---> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="q-box"> <h4><i class="fa fa-caret-right"></i> How can I contact a host? </h4> <div class="a-box" style="text-align: justify; display: none;"> <p style="text-align:justify;">Guest can easily contact host by sending a message to the host. Send a message to the host by clicking 'Send message'. The host will receive your query, message or request in his mail box. </p> </div> </div> </div> </div> </div> </div>

.faq-button{margin-top:-5%;margin-left:-1.5%;} .a-box{display:none;padding-left:3%;} .a-box ul li { font-size: 0.875rem;} .q-box h4{font-family: 'Raleway', sans-serif; font-size:16px;font-weight:500;padding-top:5px;} .q-box h4:hover{cursor:pointer;color:red; } .q-box h4 i.fa{ padding-right: 1%; } .q-box{ padding:1%;} .bg-forbox{ background: rgba(244, 23, 30,0.01); padding:1%; } .faq-button{margin-top:-5%;margin-left:-1.5%;} .bg-forbox{background: rgba(244, 23, 30,0.0.1);}

$(document).ready(function($) { $('.q-box').click(function(){ $('h4 i.fa',this).stop().toggleClass('fa-caret-right fa-caret-down'); $(this).toggleClass('bg-forbox'); $('div',this).slideToggle(); }); });