1<#assign JournalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")/>
2 <#assign currentURLSplit = currentURL?split("/")/>
3 <#assign eserviceTitle = currentURLSplit[6]?keep_before("?")/>
4 <#assign eserviceJSON = JournalArticleLocalService.getArticleByUrlTitle(groupId, eserviceTitle)/>
5 <#assign eserviceId = eserviceJSON.resourcePrimKey/>
6
7<div id="all_faqs">
8 <span id="faq_heading">Frequently Asked Questions</span>
9
10<#if entries?has_content>
11 <#list entries as curEntry>
12 <#assign fields = curEntry.getAssetRenderer().getDDMFormValuesReader().getDDMFormValues().getDDMFormFieldValues()/>
13 <#assign old=JournalArticleLocalService.fetchArticle(curEntry.classPK-1)/>
14 <#assign new_a_id=JournalArticleLocalService.fetchArticle(groupId,old.getArticleId())/>
15 <#assign docXml=new_a_id.getDocument()/>
16 <#assign asset_type = JournalArticleLocalService.getArticle(curEntry.classPK-1).getDDMStructure().getName(locale)?trim/>
17 <#if asset_type == 'FAQ'>
18 <#if docXml.selectSingleNode("/root/dynamic-element[@name='WebContent66424968']/dynamic-content")?has_content>
19
20 <#assign faqIssueType = docXml.selectSingleNode("/root/dynamic-element[@name='WebContent66424968']/dynamic-content").getText()>
21
22 <#if faqIssueType != '{}'>
23 <#assign faqIssueTypeClassPK = faqIssueType?eval.classPK?number/>
24 <#if eserviceId == faqIssueTypeClassPK>
25
26
27 <div class="faq_item">
28 <button id="faq-button-1" aria-expanded="false" style="display:flex; justify-content:space-between; align-items: center;">
29 <span class="question">${curEntry.getTitle(locale)}</span>
30 <span class="icon" aria-hidden="true" style="font-size:2.5rem;">+</span>
31 </button>
32 <div class="accordion-content">
33 <p>
34 ${fields[0].getValue().getString(locale)}
35 </p>
36 </div>
37 </div>
38 </#if>
39 </#if>
40
41
42 </#if>
43 </#if>
44 </#list>
45
46 </#if>
47</div>
48
49
50
51
52<script>
53//document.querySelector('#faq_expander').addEventListener('click', toggleFAQAnswer);
54
55const issue_items = document.querySelectorAll('#all_faqs button');
56
57function toggleAccordion() {
58 const issueItemToggle = this.getAttribute('aria-expanded');
59
60 for (i = 0; i < items.length; i++) {
61 issue_items[i].setAttribute('aria-expanded', 'false');
62 issue_items[i].lastElementChild.innerHTML = '+';
63
64 }
65
66 if (issueItemToggle == 'false') {
67 this.setAttribute('aria-expanded', 'true');
68 this.lastElementChild.innerHTML = '-';
69 }
70}
71
72issue_items.forEach((item) => item.addEventListener('click', toggleAccordion));
73
74
75
76</script>
77
78<style>
79#all_faqs {
80
81 display: flex;
82 flex-direction:column;}
83
84#all_faqs .faq_item {
85 border-bottom: 1px solid #e5e5e5;
86
87}
88
89#all_faqs .faq_item button[aria-expanded='true'] {
90 border-bottom: 1px solid #e5e5e5;
91}
92
93 #all_faqs .faq_item button[aria-expanded='true'] .question {
94}
95 #all_faqs .faq_item button[aria-expanded='true'] .icon {
96}
97
98#all_faqs button {
99 position: relative;
100 display: block;
101 text-align: left;
102 width: 100%;
103 padding: 1em 0;
104 color: black;
105 font-size: 1.15rem;
106 font-weight: 400;
107 border: none;
108 background: none;
109 outline: none;
110
111}
112
113
114
115 #all_faqs button > .icon {
116 color:#6B6C7E;
117 }
118
119#all_faqs button:hover .icon,
120#all_faqs button:focus .icon {
121 cursor: pointer;
122}
123#all_faqs button:hover .icon,
124#all_faqs button:focus .icon {
125 cursor: pointer;
126}
127
128#all_faqs button:hover::after,
129#all_faqs button:focus::after {
130 cursor: pointer;
131}
132
133#all_faqs button:hover .question,
134#all_faqs button:focus .question {
135 font-weight:600;
136}
137
138#all_faqs button .accordion-title {
139 padding: 1em 1.5em 1em 0;
140}
141
142
143
144#all_faqs button[aria-expanded='true'] .icon::after {
145 width: 0;
146
147}
148#all_faqs button[aria-expanded='true'] + .accordion-content {
149 opacity: 1;
150 max-height: 9em;
151 transition: all 200ms linear;
152 will-change: opacity, max-height;
153 display:inline;
154}
155#all_faqs .accordion-content {
156 opacity: 0;
157 max-height: 0;
158 overflow: hidden;
159 transition: opacity 200ms linear, max-height 200ms linear;
160 will-change: opacity, max-height;
161 color:#4b4c58;
162
163}
164#all_faqs .accordion-content p {
165 font-size: 21px;
166 font-weight: 550;
167 margin: 2em 0;
168}
169
170 .question {
171 padding-top:1.5rem;
172
173 /* Paragraph/Large/1200+/Regular */
174
175 font-family: 'Inter';
176 font-style: normal;
177 font-weight: 550;
178 font-size: 21px;
179 line-height: 32px;
180 /* identical to box height, or 152% */
181 }
182
183 #faq_heading{
184
185/* Heading/F3/1200+/Heavier */
186font-family: 'Inter';
187font-style: normal;
188font-weight: 700;
189font-size: 28px;
190line-height: 32px;
191color: #009CA6;
192}
193
194
195</style>
