"ACCORDION Frequently Asked Questions"
Bootstrap 3.3.0 Snippet by mehedidb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Material Bootstrap Wizard by Creative Tim</title>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title text-center wow zoomIn">
<h1>Frequently Asked Questions</h1>
<span></span>
<p>Our Frequently Asked Questions here.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why you choose Titanic?
</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.template_faq {
background: #edf3fe none repeat scroll 0 0;
}
.panel-group {
background: #fff none repeat scroll 0 0;
border-radius: 3px;
box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.04);
margin-bottom: 0;
padding: 30px;
}
#accordion .panel {
border: medium none;
border-radius: 0;
box-shadow: none;
margin: 0 0 15px 10px;
}
#accordion .panel-heading {
border-radius: 30px;
padding: 0;
}
#accordion .panel-title a {
background: #ffb900 none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 30px;
color: #fff;
display: block;
font-size: 18px;
font-weight: 600;
padding: 12px 20px 12px 50px;
position: relative;
transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed {
background: #fff none repeat scroll 0 0;
border: 1px solid #ddd;
color: #333;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
Author : Theme_ocean.
Template Name: Fury - Product Landing Page
Version : 1.0
*/
(function($) {
'use strict';
jQuery(document).on('ready', function(){
$('a.page-scroll').on('click', function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top - 50
}, 1500);
e.preventDefault();
});
});
})(jQuery);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

super awesome thanks

usmanawan83 (-1) - 4 years ago - Reply 0