The magic word "__NOTOC__" must be placed at the top of the page for this code to work properly.
It works by using the magic word to cancel the normal table of contents, and then using div and span elements plus an HTML list to generate the custom table.
Use wiki links ([[link|displaytext]]) to link to your headers. Remember to use underscores instead of spaces.
It is not possible to create sub-items (1, 1.1, 1.2 etc) like a normal table of contents does without changing css in the wiki's stylesheet.
Example:
Code:
<div style="border: 2px solid #000; width: 150px"> <div style="text-align: center;">Contents<small><span class="mw-collapsible mw-expanded" data-expandtext="Show" data-collapsetext="Hide"><big><div style="text-align: left;"><ol> <li>[[#Section_1|Section 1]]</li> <li>[[#Section_2|Section 2]]</li> <li>[[#Section_3|Section 3]]</li> <li>[[#Section_4|Section 4]]</li> <li>[[#Section_5|Section 5]]</li> </ol></div></big></span></small></div></div>
Content so you can try out the custom table of contents:
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis neque ut lorem aliquet, in tincidunt nisi vulputate. Donec vitae tortor vel nisl facilisis pulvinar. Cras eget nulla vitae eros dapibus egestas vitae non diam. Nunc convallis fringilla blandit. Vestibulum laoreet gravida risus, vitae dictum nisi facilisis sit amet. Etiam bibendum maximus aliquet. Phasellus pellentesque eros quis placerat pretium. In aliquet nunc vel nulla iaculis, vitae volutpat leo rutrum. Cras egestas felis tortor, in tincidunt ligula facilisis sed. Aenean vitae sollicitudin lectus.
Nulla leo massa, efficitur a tortor a, elementum mattis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur rutrum blandit felis, a sollicitudin dolor eleifend non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a erat elit. Integer vel cursus quam. Donec in justo porta, congue neque sed, egestas nisl. Donec iaculis luctus arcu nec commodo.
Nullam non lectus elementum, lacinia ligula at, posuere diam. Fusce tincidunt ornare sodales. Curabitur posuere nibh mi, in dictum nibh gravida eget. Ut at enim lacus. Vestibulum efficitur cursus nibh non pellentesque. Aliquam pellentesque imperdiet consectetur. Mauris varius tristique ligula, vitae dapibus enim maximus quis. Fusce placerat sapien ante, at eleifend magna ornare quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales, ante ornare ornare tincidunt, ligula mauris interdum magna, non ornare magna eros ut libero. Integer vel rhoncus nisl. Nulla mollis finibus elementum. Donec nec ullamcorper massa. Nullam vel elit ac ligula ornare ultrices ut vel nunc.
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis neque ut lorem aliquet, in tincidunt nisi vulputate. Donec vitae tortor vel nisl facilisis pulvinar. Cras eget nulla vitae eros dapibus egestas vitae non diam. Nunc convallis fringilla blandit. Vestibulum laoreet gravida risus, vitae dictum nisi facilisis sit amet. Etiam bibendum maximus aliquet. Phasellus pellentesque eros quis placerat pretium. In aliquet nunc vel nulla iaculis, vitae volutpat leo rutrum. Cras egestas felis tortor, in tincidunt ligula facilisis sed. Aenean vitae sollicitudin lectus.
Nulla leo massa, efficitur a tortor a, elementum mattis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur rutrum blandit felis, a sollicitudin dolor eleifend non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a erat elit. Integer vel cursus quam. Donec in justo porta, congue neque sed, egestas nisl. Donec iaculis luctus arcu nec commodo.
Nullam non lectus elementum, lacinia ligula at, posuere diam. Fusce tincidunt ornare sodales. Curabitur posuere nibh mi, in dictum nibh gravida eget. Ut at enim lacus. Vestibulum efficitur cursus nibh non pellentesque. Aliquam pellentesque imperdiet consectetur. Mauris varius tristique ligula, vitae dapibus enim maximus quis. Fusce placerat sapien ante, at eleifend magna ornare quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales, ante ornare ornare tincidunt, ligula mauris interdum magna, non ornare magna eros ut libero. Integer vel rhoncus nisl. Nulla mollis finibus elementum. Donec nec ullamcorper massa. Nullam vel elit ac ligula ornare ultrices ut vel nunc.
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis neque ut lorem aliquet, in tincidunt nisi vulputate. Donec vitae tortor vel nisl facilisis pulvinar. Cras eget nulla vitae eros dapibus egestas vitae non diam. Nunc convallis fringilla blandit. Vestibulum laoreet gravida risus, vitae dictum nisi facilisis sit amet. Etiam bibendum maximus aliquet. Phasellus pellentesque eros quis placerat pretium. In aliquet nunc vel nulla iaculis, vitae volutpat leo rutrum. Cras egestas felis tortor, in tincidunt ligula facilisis sed. Aenean vitae sollicitudin lectus.
Nulla leo massa, efficitur a tortor a, elementum mattis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur rutrum blandit felis, a sollicitudin dolor eleifend non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a erat elit. Integer vel cursus quam. Donec in justo porta, congue neque sed, egestas nisl. Donec iaculis luctus arcu nec commodo.
Nullam non lectus elementum, lacinia ligula at, posuere diam. Fusce tincidunt ornare sodales. Curabitur posuere nibh mi, in dictum nibh gravida eget. Ut at enim lacus. Vestibulum efficitur cursus nibh non pellentesque. Aliquam pellentesque imperdiet consectetur. Mauris varius tristique ligula, vitae dapibus enim maximus quis. Fusce placerat sapien ante, at eleifend magna ornare quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales, ante ornare ornare tincidunt, ligula mauris interdum magna, non ornare magna eros ut libero. Integer vel rhoncus nisl. Nulla mollis finibus elementum. Donec nec ullamcorper massa. Nullam vel elit ac ligula ornare ultrices ut vel nunc.
Section 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis neque ut lorem aliquet, in tincidunt nisi vulputate. Donec vitae tortor vel nisl facilisis pulvinar. Cras eget nulla vitae eros dapibus egestas vitae non diam. Nunc convallis fringilla blandit. Vestibulum laoreet gravida risus, vitae dictum nisi facilisis sit amet. Etiam bibendum maximus aliquet. Phasellus pellentesque eros quis placerat pretium. In aliquet nunc vel nulla iaculis, vitae volutpat leo rutrum. Cras egestas felis tortor, in tincidunt ligula facilisis sed. Aenean vitae sollicitudin lectus.
Nulla leo massa, efficitur a tortor a, elementum mattis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur rutrum blandit felis, a sollicitudin dolor eleifend non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a erat elit. Integer vel cursus quam. Donec in justo porta, congue neque sed, egestas nisl. Donec iaculis luctus arcu nec commodo.
Nullam non lectus elementum, lacinia ligula at, posuere diam. Fusce tincidunt ornare sodales. Curabitur posuere nibh mi, in dictum nibh gravida eget. Ut at enim lacus. Vestibulum efficitur cursus nibh non pellentesque. Aliquam pellentesque imperdiet consectetur. Mauris varius tristique ligula, vitae dapibus enim maximus quis. Fusce placerat sapien ante, at eleifend magna ornare quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales, ante ornare ornare tincidunt, ligula mauris interdum magna, non ornare magna eros ut libero. Integer vel rhoncus nisl. Nulla mollis finibus elementum. Donec nec ullamcorper massa. Nullam vel elit ac ligula ornare ultrices ut vel nunc.
Section 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis neque ut lorem aliquet, in tincidunt nisi vulputate. Donec vitae tortor vel nisl facilisis pulvinar. Cras eget nulla vitae eros dapibus egestas vitae non diam. Nunc convallis fringilla blandit. Vestibulum laoreet gravida risus, vitae dictum nisi facilisis sit amet. Etiam bibendum maximus aliquet. Phasellus pellentesque eros quis placerat pretium. In aliquet nunc vel nulla iaculis, vitae volutpat leo rutrum. Cras egestas felis tortor, in tincidunt ligula facilisis sed. Aenean vitae sollicitudin lectus.
Nulla leo massa, efficitur a tortor a, elementum mattis diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur rutrum blandit felis, a sollicitudin dolor eleifend non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a erat elit. Integer vel cursus quam. Donec in justo porta, congue neque sed, egestas nisl. Donec iaculis luctus arcu nec commodo.
Nullam non lectus elementum, lacinia ligula at, posuere diam. Fusce tincidunt ornare sodales. Curabitur posuere nibh mi, in dictum nibh gravida eget. Ut at enim lacus. Vestibulum efficitur cursus nibh non pellentesque. Aliquam pellentesque imperdiet consectetur. Mauris varius tristique ligula, vitae dapibus enim maximus quis. Fusce placerat sapien ante, at eleifend magna ornare quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sodales, ante ornare ornare tincidunt, ligula mauris interdum magna, non ornare magna eros ut libero. Integer vel rhoncus nisl. Nulla mollis finibus elementum. Donec nec ullamcorper massa. Nullam vel elit ac ligula ornare ultrices ut vel nunc.