Skip to content

Commit b1c9bf8

Browse files
alitahir4024alitahir4024
committed
project file
1 parent 9eeb140 commit b1c9bf8

File tree

2 files changed

+127
-0
lines changed

2 files changed

+127
-0
lines changed

‎arrow.png‎

10.2 KB
Loading

‎index.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>FAQ Accordian Slider</title>
6+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
list-style: none;
12+
}
13+
14+
.normal {
15+
transition: 0.5s;
16+
transform: rotate(0deg)
17+
}
18+
19+
body {
20+
font-family: 'tahoma', sans-serif;
21+
color: #666;
22+
font-size: 16px;
23+
background: #f9f9f9;
24+
line-height: 1.6em;
25+
}
26+
27+
img {
28+
width: 15px;
29+
height: 15px;
30+
margin-right: 10px;
31+
}
32+
33+
#container {
34+
width: 60%;
35+
margin: 30px auto;
36+
overflow: auto;
37+
}
38+
39+
h1 {
40+
text-align: center;
41+
margin-bottom: 20px;
42+
}
43+
44+
.title {
45+
height: 40px;
46+
background: #6bb170;
47+
color: #fff;
48+
text-align: center;
49+
padding-top: 13px;
50+
}
51+
52+
.faq li {
53+
padding: 20px;
54+
}
55+
56+
.faq li.q {
57+
background: #eee;
58+
font-weight: bold;
59+
font-size: 120%;
60+
border-bottom: 1px #ddd solid;
61+
cursor: pointer;
62+
}
63+
64+
.faq li.a {
65+
background: #ddd;
66+
display: none;
67+
}
68+
69+
@media(max-width:800px) {
70+
#container {
71+
width: 90%;
72+
}
73+
}
74+
75+
.rotate {
76+
-moz-transform: rotate(90deg);
77+
-webkit-transform: rotate(90deg);
78+
transition: 0.5s;
79+
transform: rotate(90deg);
80+
}
81+
</style>
82+
83+
<body>
84+
<div id="container">
85+
<h1>FAQ Slider</h1>
86+
<div class="title">
87+
<h3>FAQ Slider Project</h3>
88+
</div>
89+
<ul class="faq">
90+
<li class="q"><img class="normal" src="arrow.png" />How are you?</li>
91+
<li class="a">I am Fine</li>
92+
93+
<li class="q"><img class="normal" src="arrow.png">who are you?</li>
94+
<li class="a">I am a Web Developer</li>
95+
96+
<li class="q"><img class="normal" src="arrow.png">where you live?</li>
97+
<li class="a">I live in Pakistan</li>
98+
99+
<li class="q"><img class="normal" src="arrow.png">What is your country name?</li>
100+
<li class="a">Pakistan</li>
101+
102+
<li class="q"><img class="normal" src="arrow.png">what is your work place?</li>
103+
<li class="a">Vvork</li>
104+
105+
<li class="q"><img class="normal" src="arrow.png">Are you Happy?</li>
106+
<li class="a">Yes</li>
107+
</ul>
108+
</div>
109+
110+
</body>
111+
112+
113+
<script>
114+
115+
$(document).ready(function () {
116+
$("li.q").on("click", function () {
117+
$(this).next().slideToggle(100).siblings("li.a").slideUp(100)
118+
var img = $(this).children('img')
119+
$('li.q > img').not(img).removeClass("rotate")
120+
$(img).toggleClass("rotate")
121+
})
122+
})
123+
124+
</script>
125+
</head>
126+
127+
</html>

0 commit comments

Comments
 (0)