1<#--
2Web content templates are used to lay out the fields defined in a web
3content structure.
4
5Please use the left panel to quickly add commonly used variables.
6Autocomplete is also available and can be invoked by typing "${".
7--><style type="text/css">* {
8 box-sizing: border-box;
9}
10
11/* Create two equal columns that floats next to each other */
12.column1 {
13 float: left;
14 width: 25%;
15 padding: 10px;
16 height: 300px; /* Should be removed. Only for demonstration */
17}
18/* Create two equal columns that floats next to each other */
19.column2 {
20 float: left;
21 width: 75%;
22 padding: 10px;
23 /* height: 300px; Should be removed. Only for demonstration */
24}
25
26/* Clear floats after the columns */
27.row:after {
28 content: "";
29 display: table;
30 clear: both;
31}
32.row {font-family: helvetica; width: 100%; margin: 0 auto/*; overflow: hidden*/}
33
34/* Para contenido*/
35/*a{text-decoration: none}*/
36/* enlaces */
37#faq-links div {
38 text-decoration: none;
39 background-image: linear-gradient(currentColor, currentColor);
40 background-position: 0% 100%;
41 background-repeat: no-repeat;
42 background-size: 0% 2px;
43 transition: background-size .3s;
44 /*display: initial;*/
45 /*background: #5980b0;*/
46 /*padding: 4px 8px;
47 border-radius: 10px;*/
48 color: #c32432;
49 font-weight: bold;
50}
51
52#faq-links div:hover, div:focus {
53 background-size: 100% 2px;
54 color: #32639e;
55}
56
57
58
59
60
61#faq-links {padding: 0px 20px 10px}
62
63#faq-links div {
64
65 color: #3f6da4;
66
67 cursor: pointer;
68 font-weight: 700;
69 text-transform: capitalize;
70 margin: 18px 0
71}
72
73.faq-group {
74 padding: 0 20px 40px 20px;
75 position: relative
76}
77
78.faq-group div {
79 font-weight: 700;
80 text-align: center;
81 color: #32639e;
82}
83
84.faq-group hr {
85 border: 0;
86 border-top: 1px solid #32639e;
87 clear: both;
88 -moz-box-sizing: content-box;
89 -webkit-box-sizing: content-box;
90 box-sizing: content-box;
91 height: 0;
92}
93
94.faq-group:after {
95 top: 33%;
96 left: 50%;
97 border: solid transparent;
98 content: " ";
99 height: 0;
100 width: 0;
101 position: absolute;
102 pointer-events: none;
103 border-top-color: #32639e;
104 border-width: 15px;
105 margin-left: -15px
106}
107
108.faq-accordion>li {
109 border-top: 1px solid rgba(198, 198, 198, 0.4);
110 color: #2e5c93;
111 padding: 1.125em 0
112}
113
114.faq-accordion li a {
115 color: #2e5c93;
116 padding: 1.125em;
117}
118
119.faq-accordion > li:last-child {
120 border-bottom: 1px solid rgba(198, 198, 198, 0.4);
121}
122
123.faq-accordion > li > a:before {
124 content: 'Q.';
125 padding-right: 0.313em
126}
127
128.faq-accordion > li > a:after {
129 color: #c24348;
130 content: '+';
131 float: right;
132 font-weight:300;
133 margin-right: 1.25em;
134 -webkit-transform: scale(2);
135 -ms-transform: scale(2);
136 transform: scale(2);
137 overflow-y: hidden;
138}
139
140.faq-accordion > li > a.expanded:after {
141 color: #c24348;
142 content: '\2212';
143 -webkit-transform: scale(2);
144 -ms-transform: scale(2);
145 transform: scale(2);
146}
147
148.faq-accordion > li > a.expanded {font-weight: 700; opacity: 1 !important}
149
150.faq-content {
151 background-color: #eff4fa;
152 margin: 20px 0 -20px;
153}
154
155.faq-content p:before {
156 content: 'A.';
157 color: #c24348;
158 float: left;
159 font-weight: 700;
160 margin-right: .5em
161}
162
163.faq-content p {
164 margin: 0 1.2em;
165 padding: 1.250em 0
166
167}
168
169.faq-hide {display: none}
170
171.faq-selected {
172 color: #c32432!important;
173 -webkit-transition: all 1s ease;
174 transition: all 1s ease;
175}
176
177
178
179 hr {
180 margin-top: 6px;
181 margin-bottom: 20px;
182 border: 0;
183 border-top: 1px solid #32639e;
184}
185
186.slide-left{
187 color: #32639e;
188 text-align: justify;
189 -webkit-animation-name: slide-left;
190 -moz-animation-name: slide-left;
191 animation-name: slide-left;
192
193
194 -webkit-animation-duration: 1s;
195 -moz-animation-duration: 1s;
196 animation-duration: 1s;
197
198
199 -webkit-animation-timing-function: ease-in-out;
200 -moz-animation-timing-function: ease-in-out;
201 animation-timing-function: ease-in-out;
202
203}
204
205.subtit-umsa{
206 font-weight: bold;
207 font-size: 15px;
208 color:#bb2026;
209 padding-bottom: 5px;
210 padding-top: 5px;
211}
212
213@-webkit-keyframes slide-left {
214 0% {
215 -webkit-transform: translateX(150%);
216 }
217 50%{
218 -webkit-transform: translateX(-8%);
219 }
220 65%{
221 -webkit-transform: translateX(4%);
222 }
223 80%{
224
225
226 -webkit-transform: translateX(-4%);
227 }
228 95%{
229 -webkit-transform: translateX(2%);
230 }
231 100% {
232 -webkit-transform: translateX(0%);
233 }
234}
235
236@-moz-keyframes slide-left {
237 0% {
238 -webkit-transform: translateX(150%);
239 -moz-transform: translateX(150%);
240 transform: translateX(150%);
241 }
242 50%{
243 -webkit-transform: translateX(-8%);
244 -moz-transform: translateX(-8%);
245 transform: translateX(-8%);
246 }
247 65%{
248 -webkit-transform: translateX(4%);
249 -moz-transform: translateX(4%);
250 transform: translateX(4%);
251 }
252 80%{
253 -webkit-transform: translateX(-4%);
254 -moz-transform: translateX(-4%);
255 transform: translateX(-4%);
256 }
257 95%{
258 -webkit-transform: translateX(2%);
259 -moz-transform: translateX(2%);
260 transform: translateX(2%);
261 }
262 100% {
263 -webkit-transform: translateX(0%);
264 -moz-transform: translateX(0%);
265 transform: translateX(0%);
266 }
267}
268@keyframes slide-left {
269 0% {
270 -webkit-transform: translateX(150%);
271 -moz-transform: translateX(150%);
272 transform: translateX(150%);
273 }
274 50%{
275 -webkit-transform: translateX(-8%);
276 -moz-transform: translateX(-8%);
277 transform: translateX(-8%);
278 }
279 65%{
280 -webkit-transform: translateX(4%);
281 -moz-transform: translateX(4%);
282 transform: translateX(4%);
283 }
284 80%{
285 -webkit-transform: translateX(-4%);
286 -moz-transform: translateX(-4%);
287 transform: translateX(-4%);
288 }
289 95%{
290 -webkit-transform: translateX(2%);
291 -moz-transform: translateX(2%);
292 transform: translateX(2%);
293 }
294 100% {
295 -webkit-transform: translateX(0%);
296 -moz-transform: translateX(0%);
297 transform: translateX(0%);
298 }
299}
300
301
302
303/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
304@media screen and (max-width: 600px) {
305 .column1, .column2 {
306 width: 100%;
307 }
308
309 .column1 {
310 height: auto;
311 }
312}
313</style>
314
315<#assign count = 0>
316<div class="row">
317 <div class="column1">
318 <div style="padding: 0px 20px;color: #c24348;font-weight: bold; font-weight: 700;">${TitMenu.getData()}</div>
319 <hr />
320 <div id="faq-links">
321
322 <#if TitOpc.getSiblings()?has_content>
323 <#list TitOpc.getSiblings() as cur_TitOpc>
324
325 <#if count == 0>
326 <div class="faq-selected" id="unidad${count}">${cur_TitOpc.getData()}</div>
327 <#else>
328 <div id="unidad${count}">${cur_TitOpc.getData()}</div>
329 </#if>
330
331
332 <#assign count = count + 1>
333
334
335
336 </#list>
337 </#if>
338
339
340
341 </div>
342 </div>
343 <#assign count = 0>
344
345 <div class="column2">
346 <#if TitOpc.getSiblings()?has_content>
347
348
349
350 <#list TitOpc.getSiblings() as cur_TitOpc>
351 <#if count == 0>
352 <div class="about-unidad${count}" id="faq-wrapper">
353 <#else>
354 <div class="about-unidad${count} faq-hide">
355 </#if>
356 <div class="faq-group">
357 <div class="slide-left">
358 <div>${cur_TitOpc.getData()}</div>
359 </div>
360 <hr />
361 </div>
362 <!--faq-group-->
363 <div class="slide-left">
364 <div class="faq">
365 ${cur_TitOpc.getChild('Descripcion').getData()}
366 </div>
367 </div>
368 <#assign count = count + 1>
369 </div>
370 </#list>
371
372
373
374 </#if>
375
376
377 </div>
378</div>
379
380
381<script>
382/*<p>Pagination part? borrowed from <a href='/JoshBlackwood/'>Joshua Blackwood</a>'s Pen <a href='/JoshBlackwood/pen/yoLBJ/'>yoLBJ</a>.</p>*/
383
384var accordWithPage = function() {
385
386 var faqDiv = $('#faq-links div');
387
388
389$(function () {
390
391faqDiv.on("click", function() {
392
393 var hideSec = 'faq-hide';
394 var $this = $(this),
395 $id = $this.attr('id'),
396 $class = '.' + $('.about-' + $id).attr('class').replace(hideSec, '');
397
398 $('#faq-wrapper').addClass(hideSec);
399 $('.about-' + $id).removeClass(hideSec);
400 $('div[class*=about]').not($class).addClass(hideSec);
401
402 });
403
404});
405
406$(function () {
407
408 var select = 'faq-selected';
409
410 faqDiv.click(function () {
411
412 if ($(this).hasClass(select)) {
413 $(this).removeClass(select);
414 } else {
415 $('#faq-links .faq-selected').removeClass(select);
416 $(this).addClass(select);
417 }
418 }); //faq link selected
419});
420
421
422
423//Accordion
424
425$(function () {
426
427 var expand = 'expanded';
428 var content = $('.faq-content');
429 //FAQ Accordion
430 $('.faq-accordion > li > a').click(function (e) {
431 e.preventDefault();
432 if ($(this).hasClass(expand)) {
433 $(this).removeClass(expand);
434// $('.faq-accordion > li > a > div').not(this).css('opacity', '1');//returns li back to normal state
435 $(this).parent().children('ul').stop(true, true).slideUp();
436 } else {
437// $('.faq-accordion > li > a > div').not(this).css('opacity', '0.5');//dims inactive li
438 $('.faq-accordion > li > a.expanded').removeClass(expand);
439 $(this).addClass(expand);
440 content.filter(":visible").slideUp();
441 $(this).parent().children('ul').stop(true, true).slideDown();
442 }
443 }); //accordion function
444
445 content.hide();
446
447});
448
449}
450
451accordWithPage();
452
453/*$(function () {
454 $("#faq-links div").click(function () {
455 $('.slide-left').fadeOut( "slow", "linear" );
456 $('.slide-left').fadeIn( "slow", "linear" );
457 }); //faq link fade in and out
458 }); //document ready*/
459</script>