Template:CollapseTOC: Difference between revisions
Jump to navigation
Jump to search
Created page with "<html > <style> .collapsing-toc-button { border: none; background-color: transparent; color: #777; float: right; text-decoration: none; cursor: pointer..." |
mNo edit summary |
||
| Line 1: | Line 1: | ||
<html > | <html> | ||
<style> | <style> | ||
.collapsing-toc-button { | .collapsing-toc-button { | ||
Revision as of 14:58, 17 July 2020
<html> <style> .collapsing-toc-button {
border: none; background-color: transparent; color: #777; float: right; text-decoration: none; cursor: pointer; -webkit-transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
} .collapsing-toc-button.hiding {
transform: rotateZ(-90deg);
} .collapsing-toc-button:hover {
text-decoration: none; color:black; outline:none;
} .collapsing-toc-button:active, .collapsing-toc-button:focus {
outline:none;
} .toclevel-</html>1<html>:nth-last-of-type(n+2) {
border-bottom: 1px dotted rgba(0,0,0,0.05);
} .toclevel-</html>1<html> > ul > li {
line-height: 1em; opacity: 1; overflow: hidden; max-height: 100%; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} .toclevel-</html>1<html> > ul.hidden > li {
line-height: 0em; max-height: 0em; opacity: 0; margin: 0px;
} </style> <script charset="UTF-8"> /* Returns the first direct child UL of the provided element, or false if there are none.
- /
function CTOC_hasChildUl(element) {
for (var i = 0; i < element.children.length; i++) {
var child = element.children[i];
if (child.tagName === 'UL') {
return child;
}
}
return false;
};
function CTOC_Controller() {
// Get all toc items of the corresponding level.
var tocItems = document.getElementsByClassName("toclevel-</html>1<html>");
// function to toggle visibility of sub uls
function CTOC_hideHandler(event) {
var ul = event.target.nextElementSibling;
event.target.classList.toggle("hiding");
ul.classList.toggle('hidden');
}
// hide the toc levels to start.
for (var i = 0; i < tocItems.length; i++) {
var ulItem = CTOC_hasChildUl(tocItems[i]);
if (ulItem) {
if (!(ulItem.classList.contains('prepped'))) {
// create collapse button.
var button = document.createElement("button");
button.innerText = '▼';
button.classList.add("collapsing-toc-button");
button.classList.add("hiding");
// add event listener to button.
button.addEventListener('click', CTOC_hideHandler);
ulItem.classList.toggle('hidden');
ulItem.insertAdjacentElement('beforebegin',button);
ulItem.classList.add('prepped');
}
}
}
}; CTOC_Controller(); </script> </html>