2 * jQuery makeCollapsible
4 * This will enable collapsible-functionality on all passed elements.
5 * Will prevent binding twice to the same element.
6 * Initial state is expanded by default, this can be overriden by adding class
7 * "mw-collapsed" to the "mw-collapsible" element.
8 * Elements made collapsible have class "mw-made-collapsible".
9 * Except for tables and lists, the inner content is wrapped in "mw-collapsible-content".
11 * @author Krinkle <krinklemail@gmail.com>
14 * @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0>
15 * @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html>
18 $.fn
.makeCollapsible = function() {
20 return this.each(function() {
22 var $that
= $(this).addClass( 'mw-collapsible' ), // in case $( '#myAJAXelement' ).makeCollapsible() was called
24 collapsetext
= $(this).attr( 'data-collapsetext' ),
25 expandtext
= $(this).attr( 'data-expandtext' ),
26 toggleFunction = function( that
) {
28 $collapsible
= $that
.closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' );
30 // It's expanded right now
31 if ( $that
.hasClass( 'mw-collapsible-toggle-expanded' ) ) {
32 // Change link to "Show"
33 $that
.removeClass( 'mw-collapsible-toggle-expanded' ).addClass( 'mw-collapsible-toggle-collapsed' );
34 if ( $that
.find( '> a' ).size() ) {
35 $that
.find( '> a' ).text( expandtext
);
37 $that
.text( expandtext
);
39 // Hide the collapsible element
40 if ( $collapsible
.is( 'table' ) ) {
41 // Hide all direct childing table rows of this table, except the row containing the link
42 // Slide doens't work, but fade works fine as of jQuery 1.1.3
43 // http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-collapsed-function-on-a-table-row#920480
44 // Stop to prevent animations from stacking up
45 $collapsible
.find( '> tbody > tr' ).not( $that
.parent().parent() ).stop( true, true ).fadeOut();
47 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
48 $collapsible
.find( '> li' ).not( $that
.parent() ).stop( true, true ).slideUp();
50 } else { // <div>, <p> etc.
51 $collapsible
.find( '> .mw-collapsible-content' ).slideUp();
54 // It's collapsed right now
56 // Change link to "Hide"
57 $that
.removeClass( 'mw-collapsible-toggle-collapsed' ).addClass( 'mw-collapsible-toggle-expanded' );
58 if ( $that
.find( '> a' ).size() ) {
59 $that
.find( '> a' ).text( collapsetext
);
61 $that
.text( collapsetext
);
63 // Show the collapsible element
64 if ( $collapsible
.is( 'table' ) ) {
65 $collapsible
.find( '> tbody > tr' ).not( $that
.parent().parent() ).stop( true, true ).fadeIn();
67 } else if ( $collapsible
.is( 'ul' ) || $collapsible
.is( 'ol' ) ) {
68 $collapsible
.find( '> li' ).not( $that
.parent() ).stop( true, true ).slideDown();
70 } else { // <div>, <p> etc.
71 $collapsible
.find( '> .mw-collapsible-content' ).slideDown();
77 // Use custom text or default ?
78 if( !collapsetext
|| collapsetext
== '' ){
79 collapsetext
= mw
.msg( 'collapsible-collapse', 'Collapse' );
81 if ( !expandtext
|| expandtext
== '' ){
82 expandtext
= mw
.msg( 'collapsible-expand', 'Expand' );
85 // Create toggle link with a space around the brackets ( [text] )
86 var $toggleLink
= $( '<a href="#">' ).text( collapsetext
).wrap( '<span class="mw-collapsible-toggle mw-collapsible-toggle-expanded">' ).parent().prepend( ' [' ).append( '] ' ).bind( 'click.mw-collapse', function(e
){
88 toggleFunction( this );
91 // Skip if it has been enabled already.
92 if ( $that
.hasClass( 'mw-made-collapsible' ) ) {
95 $that
.addClass( 'mw-made-collapsible' );
98 // Elements are treated differently
99 if ( $that
.is( 'table' ) ) {
100 // The toggle-link will be in the last cell (td or th) of the first row
101 var $lastCell
= $( 'tr:first th, tr:first td', that
).eq(-1),
102 $toggle
= $lastCell
.find( '> .mw-collapsible-toggle' );
104 if ( !$toggle
.size() ) {
105 $lastCell
.prepend( $toggleLink
);
107 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
109 toggleFunction( this );
113 } else if ( $that
.is( 'ul' ) || $that
.is( 'ol' ) ) {
114 // The toggle-link will be in the first list-item
115 var $firstItem
= $( 'li:first', $that
),
116 $toggle
= $firstItem
.find( '> .mw-collapsible-toggle' );
118 if ( !$toggle
.size() ) {
119 // Make sure the numeral order doesn't get messed up, reset to 1 unless value-attribute is already used
120 if ( $firstItem
.attr( 'value' ) == '' ) {
121 $firstItem
.attr( 'value', '1' );
123 $that
.prepend( $toggleLink
.wrap( '<li class="mw-collapsible-toggle-li">' ).parent() );
125 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
127 toggleFunction( this );
131 } else { // <div>, <p> etc.
132 // Is there an content-wrapper already made ?
133 // If a direct child with the class does not exists, create the wrap.
134 if ( !$that
.find( '> .mw-collapsible-content' ).size() ) {
135 $that
.wrapInner( '<div class="mw-collapsible-content">' );
138 // The toggle-link will be the first child of the element
139 var $toggle
= $that
.find( '> .mw-collapsible-toggle' );
141 if ( !$toggle
.size() ) {
142 $that
.prepend( $toggleLink
);
144 $toggleLink
= $toggle
.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e
){
146 toggleFunction( this );
152 if ( $that
.hasClass( 'mw-collapsed' ) ) {