User:Ugog Nizdast/FloatingTOC.js
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/* [[Category:Wikipedia scripts]]
Originally designed to replace User:Osarius/FloatingTOC.css.
*/
if (typeof hideDefault === 'undefined') var hideDefault; //declared as global
if (typeof leftDefault === 'undefined') var leftDefault;
function hideShow(header, content) {
header.text(function () {
return content.is(":visible") ? "Hide" : "Show";
});
}
$(function() {
importStylesheet('User:Ugog Nizdast/FloatingTOC.css');
var itm = document.getElementById("toc");
if (itm) { //check if toc exists
var cln = itm.cloneNode(true); // clone and append the toc
cln.id = "toc2";
document.body.appendChild(cln);
$('#toc2').wrap("<div class='content1' id='main1' ></div>"); //encase it with header and container
var header = "<div class='header1' id= 'header1'><span id='hide'>Hide</span></div>";
$('.content1').append(header);
$('#main1').wrapAll("<div class='container1' id='main2'></div>");
var useless = document.getElementsByClassName("toctoggle")[1]; //remove the damn not working "hide" option
$(useless).remove();
$header = $(".header1");
$content = $header.prev();
if (leftDefault) $("#main2").css('right', ""); //config variables
if (hideDefault) {
$("#toc2").css('display', "none");
hideShow($header, $content); //when default is hidden, display as "hide" too
}
$(".header1").click(function () { //when clicked, collapse! vice-versa
$content.slideToggle( function () {
hideShow($header, $content);
});
});
}
});