-
Notifications
You must be signed in to change notification settings - Fork 3
/
faq.js
87 lines (67 loc) · 2.35 KB
/
faq.js
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
HTMLWidgets.widget({
name: 'faq',
type: 'output',
factory: function(el, width, height) {
return {
renderValue: function(x) {
faq(el, x);
},
resize: function(width, height) {}
};
}
});
function faq(el, x){
var jsonData = x.data
var faq = document.getElementById(el.id);
faq.classList.add("faq-package");
var faqtitle = document.createElement("H2");
var titletext = document.createTextNode(x.faqtitle);
faqtitle.appendChild(titletext);
faq.appendChild(faqtitle);
let faqallexpand = document.createElement("button");
faqallexpand.classList.add("faq-expand-all");
faqallexpand.innerHTML = "+ Expand All";
var allcontent = document.getElementsByClassName("faqcontent");
var allcollapsible = document.getElementsByClassName("faqcollapsible");
faqallexpand.addEventListener("click", function() {
if (faqallexpand.innerHTML === "+ Expand All") {
faqallexpand.innerHTML = "- Collapse All";
} else {
faqallexpand.innerHTML = "+ Expand All";
}
for (i = 0; i < allcontent.length; i++) {
if (faqallexpand.innerHTML === "+ Expand All"){
allcontent[i].style.maxHeight = null;
allcollapsible[i].classList.remove("active");
} else {
allcontent[i].style.maxHeight = allcontent[i].scrollHeight + "px";
allcollapsible[i].classList.add("active");
}
}
});
faq.appendChild(faqallexpand);
for (var i = 0; i < jsonData.answer.length; i++) {
let wrapperdiv = document.createElement("div");
wrapperdiv.classList.add("faqwrapper");
let contentdiv = document.createElement("div");
contentdiv.classList.add("faqcontent");
let ptag = document.createElement("p");
ptag.innerHTML = jsonData.answer[i];
contentdiv.appendChild(ptag);
let questiondiv = document.createElement("button");
questiondiv.classList.add("faqcollapsible");
questiondiv.innerHTML = jsonData.question[i];
questiondiv.addEventListener("click", function() {
this.classList.toggle("active");
var faqcontent = this.nextElementSibling;
if (faqcontent.style.maxHeight){
faqcontent.style.maxHeight = null;
} else {
faqcontent.style.maxHeight = faqcontent.scrollHeight + "px";
}
});
wrapperdiv.appendChild(questiondiv);
wrapperdiv.appendChild(contentdiv);
faq.appendChild(wrapperdiv);
}
}