From 46a7aa7e3e8ea98b69ae4bd0aff51465da57bcd3 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Wed, 4 Apr 2018 16:12:38 -0700
Subject: [PATCH] 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
---
 resources/src/jquery/jquery.makeCollapsible.css | 6 ++++++
 resources/src/jquery/jquery.makeCollapsible.js  | 3 ---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/src/jquery/jquery.makeCollapsible.css b/resources/src/jquery/jquery.makeCollapsible.css
index 2e5efbac8b..693cd7f9b3 100644
--- 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 aa76d6dfbb..7826baba0f 100644
--- 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 );
 			};
 
-- 
2.20.1