jquery.makeCollapsible: Use pseudo elements for square brackets around toggle

We want to use this in Minerva and mixing presentation with functionality
makes styling it differently difficult.

This change will also make it easier to deal with the reflow on
initialisation (see follow up If9c8f0974e3a4b08e4a66d37f7f5adf67d7305).

Change-Id: I4d96226c63563f16ad181e06f6bd12e6cf6bec67

diff --git a/resources/src/jquery/jquery.makeCollapsible.css b/resources/src/jquery/jquery.makeCollapsible.css
index 2e5efba..693cd7f 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.css
+++ b/resources/src/jquery/jquery.makeCollapsible.css
@@ -6,6 +6,12 @@
        -ms-user-select: none;
        user-select: none;
 }
+.mw-collapsible-toggle:before {
+       content: '[';
+}
+.mw-collapsible-toggle:after {
+       content: ']';
+}
 /* Align the toggle based on the direction of the content language */
 /* @noflip */
 .mw-content-ltr .mw-collapsible-toggle,

diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index aa76d6d..7826bab 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -8,7 +8,6 @@
  * @class jQuery.plugin.makeCollapsible
  */
 ( function ( $, mw ) {
-
        /**
         * Handler for a click on a collapsible toggler.
         *
@@ -270,8 +269,6 @@
                                                role: 'button',
                                                tabindex: 0
                                        } )
-                                       .prepend( '<span>[</span>' )
-                                       .append( '<span>]</span>' )
                                        .on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
                        };