"FAQ Center"
Bootstrap 4.0.0 Snippet by tieusuquay79

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<section class="cd-faq">
<ul class="cd-faq-categories">
<li><a class="selected" href="#basics">Basics</a></li>
<li><a href="#mobile">Mobile</a></li>
<li><a href="#account">Account</a></li>
<li><a href="#payments">Payments</a></li>
<li><a href="#privacy">Privacy</a></li>
<li><a href="#delivery">Delivery</a></li>
</ul> <!-- cd-faq-categories -->
<div class="cd-faq-items">
<ul id="basics" class="cd-faq-group">
<li class="cd-faq-title"><h2>Basics</h2></li>
<li>
<a class="cd-faq-trigger" href="#0">How do I change my password?</a>
<div class="cd-faq-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quidem blanditiis delectus corporis, possimus officia sint sequi ex tenetur id impedit est pariatur iure animi non a ratione reiciendis nihil sed consequatur atque repellendus fugit perspiciatis rerum et. Dolorum consequuntur fugit deleniti, soluta fuga nobis. Ducimus blanditiis velit sit iste delectus obcaecati debitis omnis, assumenda accusamus cumque perferendis eos aut quidem! Aut, totam rerum, cupiditate quae aperiam voluptas rem inventore quas, ex maxime culpa nam soluta labore at amet nihil laborum? Explicabo numquam, sit fugit, voluptatem autem atque quis quam voluptate fugiat earum rem hic, reprehenderit quaerat tempore at. Aperiam.</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">How do I sign up?</a>
<div class="cd-faq-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi cupiditate et laudantium esse adipisci consequatur modi possimus accusantium vero atque excepturi nobis in doloremque repudiandae soluta non minus dolore voluptatem enim reiciendis officia voluptates, fuga ullam? Voluptas reiciendis cumque molestiae unde numquam similique quas doloremque non, perferendis doloribus necessitatibus itaque dolorem quam officia atque perspiciatis dolore laudantium dolor voluptatem eligendi? Aliquam nulla unde voluptatum molestiae, eos fugit ullam, consequuntur, saepe voluptas quaerat deleniti. Repellendus magni sint temporibus, accusantium rem commodi?</p>
</div> <!-- cd-faq-content -->
</li>
<li>
<a class="cd-faq-trigger" href="#0">Can I remove a post?</a>
<div class="cd-faq-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis provident officiis, reprehenderit numquam. Praesentium veritatis eos tenetur magni debitis inventore fugit, magnam, reiciendis, saepe obcaecati ex vero quaerat distinctio velit.</p>
</div> <!-- cd-faq-content -->
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
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*::after, *::before {
content: '';
}
body {
font-size: 100%;
font-family: "Open Sans", sans-serif;
color: #4e5359;
background-color: #f3f3f5;
}
body::after {
/* overlay layer visible on small devices when the right panel slides in */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(78, 83, 89, 0.8);
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
body.cd-overlay::after {
visibility: visible;
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
jQuery(document).ready(function($){
//update these values if you change these breakpoints in the style.css file (or _layout.scss if you use SASS)
var MqM= 768,
MqL = 1024;
var faqsSections = $('.cd-faq-group'),
faqTrigger = $('.cd-faq-trigger'),
faqsContainer = $('.cd-faq-items'),
faqsCategoriesContainer = $('.cd-faq-categories'),
faqsCategories = faqsCategoriesContainer.find('a'),
closeFaqsContainer = $('.cd-close-panel');
//select a faq section
faqsCategories.on('click', function(event){
event.preventDefault();
var selectedHref = $(this).attr('href'),
target= $(selectedHref);
if( $(window).width() < MqM) {
faqsContainer.scrollTop(0).addClass('slide-in').children('ul').removeClass('selected').end().children(selectedHref).addClass('selected');
closeFaqsContainer.addClass('move-left');
$('body').addClass('cd-overlay');
} else {
$('body,html').animate({ 'scrollTop': target.offset().top - 19}, 200);
}
});
//close faq lateral panel - mobile only
$('body').bind('click touchstart', function(event){
if( $(event.target).is('body.cd-overlay') || $(event.target).is('.cd-close-panel')) {
closePanel(event);
}
});
faqsContainer.on('swiperight', function(event){
closePanel(event);
});
//show faq content clicking on faqTrigger
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit

Questions / Comments: