|
|
| Line 1: |
Line 1: |
| <html> | | <html> |
| <style>
| | window.onload = onPageLoad(); |
| .collapsing-toc-button { | | |
| border: none;
| | function onPageLoad() { |
| background-color: transparent;
| | document.getElementById("toctogglecheckbox").checked = true; |
| 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|1}}}<html>:nth-last-of-type(n+2) {
| |
| border-bottom: 1px dotted rgba(0,0,0,0.05);
| |
| }
| |
| .toclevel-</html>{{{1|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|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|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> | | </html> |
<html>
window.onload = onPageLoad();
function onPageLoad() {
document.getElementById("toctogglecheckbox").checked = true;
}
</html>