|
|
| Line 1: |
Line 1: |
| // COLLAPSIBLE HEADERS
| | |
| $(document).ready(function () {
| |
| $(".collapsible-wrapper").each(function () {
| |
| var wrapper = $(this);
| |
| var titleContent = wrapper.find(".collapsible-title-content");
| |
| var bodyContent = wrapper.find(".collapsible-body-content");
| |
| if (titleContent.length === 0 || bodyContent.length === 0) return;
| |
| var startsOpen = wrapper.data("state") === "open";
| |
| var titleHTML = titleContent.html();
| |
| var bodyHTML = bodyContent.html();
| |
| var header = $('<div class="collapsible-header"></div>');
| |
| var content = $('<div class="collapsible-content"></div>');
| |
| if (startsOpen) header.addClass("open");
| |
| var arrow = startsOpen ? "▲" : "▼";
| |
| header.append(titleHTML);
| |
| header.append('<span class="collapse-toggle" aria-hidden="true">' + arrow + '</span>');
| |
| content.html(bodyHTML);
| |
| if (!startsOpen) content.hide();
| |
| wrapper.replaceWith(header.add(content));
| |
|
| |
| // Inicializar elementos mw-collapsible dentro del contenido
| |
| content.find('.mw-collapsible').each(function() {
| |
| if (typeof mw !== 'undefined' && mw.hook) {
| |
| mw.hook('wikipage.content').fire($(this));
| |
| }
| |
| });
| |
|
| |
| header.on("click", function () {
| |
| content.slideToggle(150);
| |
| header.toggleClass("open");
| |
| var icon = header.hasClass("open") ? "▲" : "▼";
| |
| header.find(".collapse-toggle").text(icon);
| |
| });
| |
| });
| |
| });
| |
