"FAQ page "
Bootstrap 3.3.0 Snippet by faisalkhan123

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
.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);}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
$(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();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard React
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: