// Table of contents toggle
mw.hook( 'wikipage.content' ).add( function ( $content ) {
- var $toc, $tocTitle, $tocToggleLink, $tocList, hideToc;
- $toc = $content.find( '#toc' );
- $tocTitle = $content.find( '#toctitle' );
- $tocToggleLink = $content.find( '#togglelink' );
- $tocList = $toc.find( 'ul' ).eq( 0 );
+ $content.find( '.toc' ).addBack( '.toc' ).each( function () {
+ var hideToc,
+ $this = $( this ),
+ // .toctitle is new so may not exist in HTML caches for a few weeks,
+ // so keep checking for #toctitle for now
+ $tocTitle = $this.find( '.toctitle, #toctitle' ),
+ $tocToggleLink = $this.find( '.togglelink' ),
+ $tocList = $this.find( 'ul' ).eq( 0 );
- // Hide/show the table of contents element
- function toggleToc() {
- if ( $tocList.is( ':hidden' ) ) {
- $tocList.slideDown( 'fast' );
- $tocToggleLink.text( mw.msg( 'hidetoc' ) );
- $toc.removeClass( 'tochidden' );
- mw.cookie.set( 'hidetoc', null );
- } else {
- $tocList.slideUp( 'fast' );
- $tocToggleLink.text( mw.msg( 'showtoc' ) );
- $toc.addClass( 'tochidden' );
- mw.cookie.set( 'hidetoc', '1' );
+ // Hide/show the table of contents element
+ function toggleToc() {
+ if ( $tocList.is( ':hidden' ) ) {
+ $tocList.slideDown( 'fast' );
+ $tocToggleLink.text( mw.msg( 'hidetoc' ) );
+ $this.removeClass( 'tochidden' );
+ mw.cookie.set( 'hidetoc', null );
+ } else {
+ $tocList.slideUp( 'fast' );
+ $tocToggleLink.text( mw.msg( 'showtoc' ) );
+ $this.addClass( 'tochidden' );
+ mw.cookie.set( 'hidetoc', '1' );
+ }
}
- }
- // Only add it if there is a complete TOC and it doesn't
- // have a toggle added already
- if ( $toc.length && $tocTitle.length && $tocList.length && !$tocToggleLink.length ) {
- hideToc = mw.cookie.get( 'hidetoc' ) === '1';
+ // Only add it if there is a complete TOC and it doesn't
+ // have a toggle added already
+ if ( $tocTitle.length && $tocList.length && !$tocToggleLink.length ) {
+ hideToc = mw.cookie.get( 'hidetoc' ) === '1';
- $tocToggleLink = $( '<a role="button" tabindex="0" id="togglelink"></a>' )
- .text( mw.msg( hideToc ? 'showtoc' : 'hidetoc' ) )
- .on( 'click keypress', function ( e ) {
- if (
- e.type === 'click' ||
- e.type === 'keypress' && e.which === 13
- ) {
- toggleToc();
- }
- } );
+ $tocToggleLink = $( '<a role="button" tabindex="0" class="togglelink"></a>' )
+ .text( mw.msg( hideToc ? 'showtoc' : 'hidetoc' ) )
+ .on( 'click keypress', function ( e ) {
+ if (
+ e.type === 'click' ||
+ e.type === 'keypress' && e.which === 13
+ ) {
+ toggleToc();
+ }
+ } );
- $tocTitle.append(
- $tocToggleLink
- .wrap( '<span class="toctoggle"></span>' )
- .parent()
- .prepend( ' [' )
- .append( '] ' )
- );
+ $tocTitle.append(
+ $tocToggleLink
+ .wrap( '<span class="toctoggle"></span>' )
+ .parent()
+ .prepend( ' [' )
+ .append( '] ' )
+ );
- if ( hideToc ) {
- $tocList.hide();
- $toc.addClass( 'tochidden' );
+ if ( hideToc ) {
+ $tocList.hide();
+ $this.addClass( 'tochidden' );
+ }
}
- }
+ } );
} );
}( mediaWiki, jQuery ) );
Some text
===Another headline===
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Headline_1"><span class="tocnumber">1</span> <span class="toctext">Headline 1</span></a>
<ul>
== Headline 2 ==
== Headline ==
!! html/php
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Headline_2"><span class="tocnumber">1</span> <span class="toctext">Headline 2</span></a></li>
<li class="toclevel-1 tocsection-2"><a href="#Headline"><span class="tocnumber">2</span> <span class="toctext">Headline</span></a></li>
========= Level 9 Heading=========
========== Level 10 Heading==========
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Level_1_Heading"><span class="tocnumber">1</span> <span class="toctext">Level 1 Heading</span></a>
<ul>
== title 2 ==
=== title 2.1 ===
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
<ul>
__FORCETOC__
==<span id="old-anchor"></span>New title==
!! html/php
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#New_title"><span class="tocnumber">1</span> <span class="toctext">New title</span></a></li>
</ul>
== title 2 ==
=== title 2.1 ===
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
<ul>
====Section 1.1.1.1====
==Section 2==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Section_1"><span class="tocnumber">1</span> <span class="toctext">Section 1</span></a>
<ul>
=== title 1.1 ===
== title 2 ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#title_1"><span class="tocnumber">1</span> <span class="toctext">title 1</span></a>
<ul>
!! html
<p>The tooltips shall not show entities to the user (ie. be double escaped)
</p>
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#text_.3E_text"><span class="tocnumber">1</span> <span class="toctext">text > text</span></a></li>
<li class="toclevel-1 tocsection-2"><a href="#text_.3C_text"><span class="tocnumber">2</span> <span class="toctext">text < text</span></a></li>
!! html
<p>Id should not contain + for spaces
</p>
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Space_between_Text"><span class="tocnumber">1</span> <span class="toctext">Space between Text</span></a></li>
<li class="toclevel-1 tocsection-2"><a href="#Space-Entity_between_Text"><span class="tocnumber">2</span> <span class="toctext">Space-Entity between Text</span></a></li>
=''italic'' heading==
==''italic'' heading=
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#foo.3D"><span class="tocnumber">1</span> <span class="toctext">foo=</span></a></li>
<li class="toclevel-1 tocsection-2"><a href="#.3Dfoo"><span class="tocnumber">2</span> <span class="toctext">=foo</span></a></li>
== Header 2.2 ==
__NOEDITSECTION__
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1"><a href="#Header_1"><span class="tocnumber">1</span> <span class="toctext">Header 1</span></a>
<ul>
http://__TOC__
!! html
<h2><span class="mw-headline" id="onmouseover.3D">onmouseover=</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Parser_test&action=edit&section=1" title="Edit section: onmouseover=">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
-http://<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+http://<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#onmouseover.3D"><span class="tocnumber">1</span> <span class="toctext">onmouseover=</span></a></li>
</ul>
<h2><span class="mw-headline" id="onmouseover.3D">onmouseover=</span><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=Parser_test&action=edit&section=1" title="Edit section: onmouseover=">edit</a><span class="mw-editsection-bracket">]</span></span></h2>
<p>http://</p>
<div id="toc" class="toc">
-<div id="toctitle">
+<div id="toctitle" class="toctitle">
<h2>Contents</h2>
</div>
<ul>
=====5=====
==2==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#2"><span class="tocnumber">1</span> <span class="toctext">2</span></a>
<ul>
__TOC__
== ''Lost'' episodes ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Lost_episodes"><span class="tocnumber">1</span> <span class="toctext"><i>Lost</i> episodes</span></a></li>
</ul>
__TOC__
== '''should be bold''' then normal text ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#should_be_bold_then_normal_text"><span class="tocnumber">1</span> <span class="toctext"><b>should be bold</b> then normal text</span></a></li>
</ul>
__TOC__
== Image [[Image:foobar.jpg]] ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Image"><span class="tocnumber">1</span> <span class="toctext">Image</span></a></li>
</ul>
__TOC__
== <blockquote>Quote</blockquote> ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Quote"><span class="tocnumber">1</span> <span class="toctext">Quote</span></a></li>
</ul>
!! html+tidy
<p></p>
<div id="toc" class="toc">
-<div id="toctitle">
+<div id="toctitle" class="toctitle">
<h2>Contents</h2>
</div>
<ul>
<small>Hanc marginis exiguitas non caperet.</small>
QED
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Proof:_2_.3C_3"><span class="tocnumber">1</span> <span class="toctext">Proof: 2 < 3</span></a></li>
</ul>
== <i>Foo</i> <blockquote>Bar</blockquote> ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Foo_Bar"><span class="tocnumber">1</span> <span class="toctext"><i>Foo</i> <b>Bar</b></span></a></li>
<li class="toclevel-1 tocsection-2"><a href="#Foo_Bar_2"><span class="tocnumber">2</span> <span class="toctext"><i>Foo</i> Bar</span></a></li>
!! html+tidy
<p></p>
<div id="toc" class="toc">
-<div id="toctitle">
+<div id="toctitle" class="toctitle">
<h2>Contents</h2>
</div>
<ul>
== <sup class="a > b">Evilbye</sup> ==
!! html/php
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Hello"><span class="tocnumber">1</span> <span class="toctext"><sup>Hello</sup></span></a></li>
<li class="toclevel-1 tocsection-2"><a href="#b.22.3EEvilbye"><span class="tocnumber">2</span> <span class="toctext"><sup> b">Evilbye</sup></span></a></li>
== <span dir="ltr" style="font-style: italic">Attributes after dir on these span tags must be deleted from the TOC</span> ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#C.2B.2B"><span class="tocnumber">1</span> <span class="toctext"><span dir="ltr">C++</span></span></a></li>
<li class="toclevel-1 tocsection-2"><a href="#.D7.96.D7.91.D7.A0.D7.92.21"><span class="tocnumber">2</span> <span class="toctext"><span dir="rtl">זבנג!</span></span></a></li>
__TOC__
== <bdi>test</bdi> ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#test"><span class="tocnumber">1</span> <span class="toctext"><bdi>test</bdi></span></a></li>
</ul>
__TOC__
== <s>test</s> test <strike>test</strike> ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#test_test_test"><span class="tocnumber">1</span> <span class="toctext"><s>test</s> test <strike>test</strike></span></a></li>
</ul>
__TOC__
== x ==
!! html
-<div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div>
+<div id="toc" class="toc"><div id="toctitle" class="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><a href="#x"><span class="tocnumber">1</span> <span class="toctext">x</span></a></li>
</ul>
!! html+tidy
<p></p>
<div id="toc" class="toc">
-<div id="toctitle">
+<div id="toctitle" class="toctitle">
<h2>Contents</h2>
</div>
<ul>