Array

MediaWiki:Common.js: Difference between revisions

No edit summary
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */


// COLLAPSIBLE HEADER - improved (arrow left + CSS rotate)
// COLLAPSIBLE HEADER - Estilo Wikipedia (flecha correcta)
$(document).ready(function () {
$(document).ready(function () {
     $(".collapsible-header").each(function () {
     $(".collapsible-header").each(function () {
         var header = $(this);
         var header = $(this);
         var content = header.next(".collapsible-content");
         var content = header.next(".collapsible-content");


        // Skip if there is no associated collapsible-content block
         if (content.length === 0) return;
         if (content.length === 0) return;


         // Check if the section should start open (template may add class "open")
         // Si comienza abierto según el template
         var startsOpen = header.hasClass("open");
         var startsOpen = header.hasClass("open");


         // Hide content only if it should start closed
         // Flecha correcta según estado inicial
         if (!startsOpen) {
         var arrow = startsOpen ? "▲" : "";
            content.hide();
        } else {
            // ensure the header has the open class in case it's needed
            header.addClass("open");
        }


         // Always use the same arrow character and rotate with CSS
         // Insertar flecha al inicio
        // Prepend so the arrow appears before the header text
         header.prepend('<span class="collapse-toggle" aria-hidden="true">' + arrow + '</span>');
         header.prepend('<span class="collapse-toggle" aria-hidden="true"></span>');


         // Make header clickable
         // Mostrar/ocultar contenido según estado inicial
         header.css("cursor", "pointer");
         if (!startsOpen) content.hide();


         // Collapse / Expand behavior
         // Click para expandir/colapsar
         header.on("click", function () {
         header.on("click", function () {
            // Alternar visibilidad
             content.slideToggle(200);
             content.slideToggle(200);
            // Alternar clase
             header.toggleClass("open");
             header.toggleClass("open");
            // Cambiar flecha según estado
            var icon = header.hasClass("open") ? "▲" : "▼";
            header.find(".collapse-toggle").text(icon);
         });
         });
     });
     });
});
});

Revision as of 14:12, 28 November 2025

/* Any JavaScript here will be loaded for all users on every page load. */

// COLLAPSIBLE HEADER - Estilo Wikipedia (flecha correcta)
$(document).ready(function () {
    $(".collapsible-header").each(function () {

        var header = $(this);
        var content = header.next(".collapsible-content");

        if (content.length === 0) return;

        // Si comienza abierto según el template
        var startsOpen = header.hasClass("open");

        // Flecha correcta según estado inicial
        var arrow = startsOpen ? "▲" : "▼";

        // Insertar flecha al inicio
        header.prepend('<span class="collapse-toggle" aria-hidden="true">' + arrow + '</span>');

        // Mostrar/ocultar contenido según estado inicial
        if (!startsOpen) content.hide();

        // Click para expandir/colapsar
        header.on("click", function () {

            // Alternar visibilidad
            content.slideToggle(200);

            // Alternar clase
            header.toggleClass("open");

            // Cambiar flecha según estado
            var icon = header.hasClass("open") ? "▲" : "▼";
            header.find(".collapse-toggle").text(icon);
        });
    });
});