Skip to content

Commit e8b4647

Browse files
vaibhavpacharyavaibhavpacharya
authored
Add files via upload
1 parent a917254 commit e8b4647

File tree

3 files changed

+131
-0
lines changed

3 files changed

+131
-0
lines changed

‎FAQ Accordian Slider/css/style.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body{
7+
font-family: 'Tahoma',sans-serif;
8+
font-size: 16px;
9+
background: #f9f9f9;
10+
color: #666;
11+
line-height: 1.6em;
12+
}
13+
14+
ul, li{
15+
list-style: none;
16+
17+
}
18+
19+
.container{
20+
width: 60%;
21+
margin: 30px auto;
22+
overflow: auto;
23+
}
24+
25+
h1{
26+
text-align: center;
27+
margin-bottom: 20px;
28+
}
29+
30+
.title{
31+
height: 40px;
32+
background: #6bb170;
33+
color: #fff;
34+
text-align: center;
35+
padding-top: 13px;
36+
}
37+
38+
.faq li{
39+
padding: 20px;
40+
}
41+
42+
.faq li.q{
43+
background: #eee;
44+
font-weight: bold;
45+
font-size: 120%;
46+
border-bottom: 1px #eee solid;
47+
cursor: pointer;
48+
}
49+
50+
.faq li.a{
51+
background: #ddd;
52+
display: none;
53+
}
54+
55+
@media(max-width:800px) {
56+
.container{
57+
width: 90%;
58+
}
59+
}
60+
61+
.rotate{
62+
transform: rotate(90deg);
63+
-ms-transform: rotate(90deg); /* IE 9 */
64+
-moz-transform: rotate(90deg); /* Firefox */
65+
-webkit-transform: rotate(90deg); /* Safari and Chrome */
66+
-o-transform: rotate(90deg); /* Opera */
67+
}

‎FAQ Accordian Slider/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>FAQ Accordian Slider</title>
8+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
9+
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.rotate/0.4.0/jquery.rotate.js"></script>
10+
<script type="text/javascript" src="js\script.js"></script>
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
12+
<link rel="stylesheet" href="css\style.css">
13+
</head>
14+
<body>
15+
<div class="container">
16+
<h1>jQuery FAQ Slider </h1>
17+
<div class="title"><h3>FAQ Slider using jQuery</h3></div>
18+
<ul class="faq">
19+
<li class="q"><i class="fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, dolor!</li>
20+
<li class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius odit alias exercitationem excepturi in iusto, assumenda inventore, temporibus hic vel, animi ab perspiciatis architecto.</li>
21+
22+
<li class="q"><i class="fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, dolor!</li>
23+
<li class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius odit alias exercitationem excepturi in iusto, assumenda inventore, temporibus hic vel, animi ab perspiciatis architecto.</li>
24+
25+
<li class="q"><i class="fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, dolor!</li>
26+
<li class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius odit alias exercitationem excepturi in iusto, assumenda inventore, temporibus hic vel, animi ab perspiciatis architecto.</li>
27+
28+
<li class="q"><i class="fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, dolor!</li>
29+
<li class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius odit alias exercitationem excepturi in iusto, assumenda inventore, temporibus hic vel, animi ab perspiciatis architecto.</li>
30+
31+
<li class="q"><i class="fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, dolor!</li>
32+
<li class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius odit alias exercitationem excepturi in iusto, assumenda inventore, temporibus hic vel, animi ab perspiciatis architecto.</li>
33+
34+
<li class="q"><i class="fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, dolor!</li>
35+
<li class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius odit alias exercitationem excepturi in iusto, assumenda inventore, temporibus hic vel, animi ab perspiciatis architecto.</li>
36+
37+
<li class="q"><i class="fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, dolor!</li>
38+
<li class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium eius odit alias exercitationem excepturi in iusto, assumenda inventore, temporibus hic vel, animi ab perspiciatis architecto.</li>
39+
40+
</ul>
41+
</div>
42+
</body>
43+
</html>

‎FAQ Accordian Slider/js/script.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
//Accordian
2+
var action = "click";
3+
var speed = "500";
4+
5+
$(document).ready(function() {
6+
//Question Handler
7+
$('li.q').on(action,function(){
8+
//select answer element or next element
9+
$(this).next()
10+
.slideToggle(speed)
11+
//select other answers
12+
.siblings('li.a')
13+
.slideUp();
14+
//Get arrow for active question
15+
var img = $(this).children('.fa');
16+
//Remove rotate class other than active question
17+
$('.fa').not(img).removeClass('rotate');
18+
//Toggle rotate class
19+
img.toggleClass('rotate');
20+
});
21+
});

0 commit comments

Comments
 (0)