Skip to content

Commit 11a3398

Browse files
abhinavk96abhinavk96
committed
Improve FaQ, make buttons rotate
1 parent 76261f1 commit 11a3398

3 files changed

Lines changed: 35 additions & 240 deletions

File tree

‎index.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -152,57 +152,57 @@ <h3 class="timeline__title">18th Mar 5:00 PM :- Prize Distribution & Feedback Se
152152
<h3>FAQ</h3>
153153
<div class="faqcolumn">
154154
<div class="faqelem wow fadeInUp">
155-
<div class="question" id="ques1">Who can apply?</div>
155+
<div class="question" data-box="1">Who can apply?</div>
156156
<div class="box" id="box1">
157-
<div class="box-inner" id="faq1">
157+
<div class="box-inner">
158158
Everyone can participate in HINT 3.0. Though we shall need a consent from your parents approving your participation if you're under 18 years of age. </div>
159159
</div>
160160
</div>
161161
<div class="faqelem wow fadeInUp" data-wow-delay="0.2s">
162-
<div class="question" id="ques2">Can we apply as a team?</div>
162+
<div class="question" data-box="2">Can we apply as a team?</div>
163163
<div class="box" id="box2">
164-
<div class="box-inner" id="faq2">
164+
<div class="box-inner">
165165
Yes! This hackathon is strictly a team competition. We believe that you’re stronger as a team than you are apart. You can join or create a team once you've started an individual application.</div>
166166
</div>
167167
</div>
168168
<div class="faqelem wow fadeInUp" data-wow-delay="0.4s">
169-
<div class="question" id="ques3">What if I don’t have a team or an idea?</div>
169+
<div class="question" data-box="3">What if I don’t have a team or an idea?</div>
170170
<div class="box" id="box3">
171-
<div class="box-inner" id="faq3">
171+
<div class="box-inner">
172172
Not to worry, most people don’t! We’ll have team formation and ideation events geared towards helping you find people to work with.</div>
173173
</div>
174174
</div>
175175
<div class="faqelem wow fadeInUp" data-wow-delay="0.6s">
176-
<div class="question" id="ques4">What if I don’t want to present my hack?</div>
176+
<div class="question" data-box="4">What if I don’t want to present my hack?</div>
177177
<div class="box" id="box4">
178-
<div class="box-inner" id="faq4">
178+
<div class="box-inner">
179179
Unfinished or unimpressive (so you think) projects should be presented anyway! Presenting your hack gives you a chance to be proud of what you’ve done, and a constructive perspective of where you should be headed next.</div>
180180
</div>
181181
</div>
182182
</div>
183183
<div class="faqcolumn">
184184
<div class="faqelem wow fadeInUp">
185-
<div class="question" id="ques5">How to reach IIIT-Allahabad?</div>
185+
<div class="question" data-box="5">How to reach IIIT-Allahabad?</div>
186186
<div class="box" id="box5">
187-
<div class="box-inner" id="faq5"> Allahabad is well connected to all major cities of India by train. The airport at Allahabad has a daily flight to Delhi. Varansi International Airport is a 3 hour drive from Allahabad while Lucknow International Airport is 5 hours away.</div>
187+
<div class="box-inner"> Allahabad is well connected to all major cities of India by train. The airport at Allahabad has a daily flight to Delhi. Varansi International Airport is a 3 hour drive from Allahabad while Lucknow International Airport is 5 hours away.</div>
188188
</div>
189189
</div>
190190
<div class="faqelem wow fadeInUp" data-wow-delay="0.2s">
191-
<div class="question" id="ques6">Do we provide travel cost?</div>
191+
<div class="question" data-box="6">Do we provide travel cost?</div>
192192
<div class="box" id="box6">
193-
<div class="box-inner" id="faq6"> We can’t guarantee reimbursements for everyone, but we don’t want money to keep you from experiencing HINT. You’ll get a reimbursement amount along with your invitation. Let us know if you still need help making your way to Allahabad and we’ll see what we can do. </div>
193+
<div class="box-inner"> We can’t guarantee reimbursements for everyone, but we don’t want money to keep you from experiencing HINT. You’ll get a reimbursement amount along with your invitation. Let us know if you still need help making your way to Allahabad and we’ll see what we can do. </div>
194194
</div>
195195
</div>
196196
<div class="faqelem wow fadeInUp" data-wow-delay="0.4s">
197-
<div class="question" id="ques7">Are there prizes for girl teams?</div>
197+
<div class="question" data-box="7">Are there prizes for girl teams?</div>
198198
<div class="box" id="box7">
199-
<div class="box-inner" id="faq7">HINT has always been a huge supporter of gender equality. Thus we have swag exclusively for girls to promote and encourage them.</div>
199+
<div class="box-inner">HINT has always been a huge supporter of gender equality. Thus we have swag exclusively for girls to promote and encourage them.</div>
200200
</div>
201201
</div>
202202
<div class="faqelem wow fadeInUp" data-wow-delay="0.6s">
203-
<div class="question" id="ques8">Did we miss out on any question?</div>
203+
<div class="question" data-box="8">Did we miss out on any question?</div>
204204
<div class="box" id="box8">
205-
<div class="box-inner" id="faq8"> Ask us your queries on <a href="https://www.facebook.com/HackInTheNorth/" style="color: black">Facebook</a> or <a href="https://twitter.com/hintiiita" style="color: black">Twitter</a> or <a href="mailto:team@hackinthenorth.com" style="color: black">mail</a> us.</div>
205+
<div class="box-inner"> Ask us your queries on <a href="https://www.facebook.com/HackInTheNorth/" style="color: black">Facebook</a> or <a href="https://twitter.com/hintiiita" style="color: black">Twitter</a> or <a href="mailto:team@hackinthenorth.com" style="color: black">mail</a> us.</div>
206206
</div>
207207
</div>
208208
</div>

‎static/css/main.css‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -308,14 +308,18 @@ li{
308308
#faq .question:after {
309309
color: #536bb1;
310310
-webkit-font-smoothing: antialiased;
311-
content: ">";
311+
content: "<";
312312
position: relative;
313313
float: right;
314314
font-size: 1em;
315315
font-weight: bold;
316-
-webkit-transform: rotate(90deg);
317-
-ms-transform: rotate(90deg);
318-
transform: rotate(90deg); }
316+
-webkit-transform: rotate(0deg);
317+
-ms-transform: rotate(0deg);
318+
transform: rotate(0deg); }
319+
#faq .question.open:after {
320+
-webkit-transform: rotate(-90deg);
321+
-ms-transform: rotate(-90deg);
322+
transform: rotate(-90deg); }
319323
#faq .answer {
320324
border: 3px solid #fff;
321325
padding: 0px 20px;

‎static/js/faq.js‎

Lines changed: 11 additions & 220 deletions
Original file line numberDiff line numberDiff line change
@@ -1,225 +1,16 @@
11
$(document).ready(function(){
2-
$("#box1").slideToggle();
3-
$("#box2").slideToggle();
4-
$("#box3").slideToggle();
5-
$("#box4").slideToggle();
6-
$("#box5").slideToggle();
7-
$("#box6").slideToggle();
8-
$("#box7").slideToggle();
9-
$("#box8").slideToggle();
10-
11-
function check1(){
12-
if ($("#ques1").hasClass("open")) {
13-
$("#box1").slideToggle();
14-
$("#ques1").removeClass("open")
15-
}
16-
}
17-
18-
function check2(){
19-
if ($("#ques2").hasClass("open")) {
20-
$("#box2").slideToggle();
21-
$("#ques2").removeClass("open")
22-
}
23-
}
24-
25-
function check3(){
26-
if ($("#ques3").hasClass("open")) {
27-
$("#box3").slideToggle();
28-
$("#ques3").removeClass("open")
29-
}
30-
}
31-
32-
function check4(){
33-
if ($("#ques4").hasClass("open")) {
34-
$("#box4").slideToggle();
35-
$("#ques4").removeClass("open")
36-
}
37-
}
38-
39-
function check5(){
40-
if ($("#ques5").hasClass("open")) {
41-
$("#box5").slideToggle();
42-
$("#ques5").removeClass("open")
43-
}
44-
}
45-
46-
function check6(){
47-
if ($("#ques6").hasClass("open")) {
48-
$("#box6").slideToggle();
49-
$("#ques6").removeClass("open")
50-
}
51-
}
52-
53-
function check7(){
54-
if ($("#ques7").hasClass("open")) {
55-
$("#box7").slideToggle();
56-
$("#ques7").removeClass("open")
57-
}
58-
}
59-
60-
function check8(){
61-
if ($("#ques8").hasClass("open")) {
62-
$("#box8").slideToggle();
63-
$("#ques8").removeClass("open")
64-
}
65-
}
66-
$("#ques1").click(function(){
67-
$("#faq1").css("display","block");
68-
if ($("#ques1").hasClass("open")) {
69-
$("#box1").slideToggle();
70-
$("#ques1").removeClass("open")
71-
}
72-
else{
73-
check2();
74-
check3();
75-
check4();
76-
check5();
77-
check6();
78-
check7();
79-
check8();
80-
81-
$("#box1").slideToggle();
82-
$(this).addClass("open");
83-
}
84-
});
85-
86-
$("#ques2").click(function(){
87-
$("#faq2").css("display","block");
88-
if ($("#ques2").hasClass("open")) {
89-
$("#box2").slideToggle();
90-
$("#ques2").removeClass("open")
91-
}
92-
else{
93-
check1();
94-
check3();
95-
check4();
96-
check5();
97-
check6();
98-
check7();
99-
check8();
100-
101-
$("#box2").slideToggle();
102-
$(this).addClass("open");
103-
}
104-
});
105-
106-
$("#ques3").click(function(){
107-
$("#faq3").css("display","block");
108-
if ($("#ques3").hasClass("open")) {
109-
$("#box3").slideToggle();
110-
$("#ques3").removeClass("open")
111-
}
112-
else{
113-
check1();
114-
check2();
115-
check4();
116-
check5();
117-
check6();
118-
check7();
119-
check8();
120-
121-
$("#box3").slideToggle();
122-
$(this).addClass("open");
123-
}
124-
});
125-
126-
$("#ques4").click(function(){
127-
$("#faq4").css("display","block");
128-
if ($("#ques4").hasClass("open")) {
129-
$("#box4").slideToggle();
130-
$("#ques4").removeClass("open")
131-
}
132-
else{
133-
check1();
134-
check2();
135-
check3();
136-
check5();
137-
check6();
138-
check7();
139-
check8();
140-
141-
$("#box4").slideToggle();
142-
$(this).addClass("open");
143-
}
144-
});
145-
146-
$("#ques5").click(function(){
147-
$("#faq5").css("display","block");
148-
if ($("#ques5").hasClass("open")) {
149-
$("#box5").slideToggle();
150-
$("#ques5").removeClass("open")
151-
}
152-
else{
153-
check1();
154-
check2();
155-
check3();
156-
check4();
157-
check6();
158-
check7();
159-
check8();
160-
161-
$("#box5").slideToggle();
162-
$(this).addClass("open");
163-
}
164-
});
165-
166-
$("#ques6").click(function(){
167-
$("#faq6").css("display","block");
168-
if ($("#ques6").hasClass("open")) {
169-
$("#box6").slideToggle();
170-
$("#ques6").removeClass("open")
171-
}
172-
else{
173-
check1();
174-
check2();
175-
check3();
176-
check4();
177-
check5();
178-
check7();
179-
check8();
180-
181-
$("#box6").slideToggle();
182-
$(this).addClass("open");
2+
var boxes = $('.box');
3+
var questions = $('.question')
4+
boxes.slideToggle();
5+
$(".question").click(function(){
6+
$("#box"+$(this).data('box')).slideToggle();
7+
$(this).toggleClass('open');
8+
for (ques of questions) {
9+
if($(ques).data('box')!==$(this).data('box') && $(ques).hasClass('open')){
10+
$(ques).toggleClass('open');
11+
$("#box"+$(ques).data('box')).slideToggle();
12+
}
18313
}
18414
});
18515

186-
$("#ques7").click(function(){
187-
$("#faq7").css("display","block");
188-
if ($("#ques7").hasClass("open")) {
189-
$("#box7").slideToggle();
190-
$("#ques7").removeClass("open")
191-
}
192-
else{
193-
check1();
194-
check2();
195-
check3();
196-
check4();
197-
check5();
198-
check6();
199-
check8();
200-
201-
$("#box7").slideToggle();
202-
$(this).addClass("open");
203-
}
204-
});
205-
206-
$("#ques8").click(function(){
207-
$("#faq8").css("display","block");
208-
if ($("#ques8").hasClass("open")) {
209-
$("#box8").slideToggle();
210-
$("#ques8").removeClass("open")
211-
}
212-
else{
213-
check1();
214-
check2();
215-
check3();
216-
check4();
217-
check5();
218-
check6();
219-
check7();
220-
221-
$("#box8").slideToggle();
222-
$(this).addClass("open");
223-
}
224-
});
22516
});

0 commit comments

Comments
 (0)