Clickable to-do list - Experimental.

This commit is contained in:
Philip Sargent 2020-03-29 03:32:27 +01:00
parent effadc446a
commit 04b5409d6f
2 changed files with 55 additions and 5 deletions

View File

@ -83,8 +83,8 @@ dt {
/* Toggled State */
input[type=checkbox] ~ dl dd {
display: none;
}
input[type=checkbox]:checked ~ dl dd {
display: block;
}
input[type=checkbox]:checked ~ dl dd {
display: none;
}

View File

@ -9,10 +9,16 @@
<link rel="stylesheet" type="text/css" href="x-todo-styles.css" />
<button onclick="window.location.href = 'x-todo.html_edit';">Update this to-do list</button>
<label for="toggle-1">Toggle sub-items</label>
<!--
<label for="toggle-1">Toggle visibility of all sub-items</label>
<input type="checkbox" id="toggle-1">
-->
<h2>Taken from file on ::expoweb::/TODO </h2>
<h2>Experimental</h2>
<p>Click on a sub-heading to hide and reveal the individual to-do items. If a heading is in italics, then there are hidden items.
<p>Edit this page by clciking on the big blue button. It uses the same "Edit this page" function that you may have used before.
<h2>Taken from file on ::expoweb::/TODO </h2>
<dl>
<dt>Add missing images to logbooks</dt>
<dd>
@ -38,6 +44,9 @@
<h2>Documentation</h2>
<dl>
<dt><!--2020-03-29 psargent-->Document this to-do list thing</dt>
<dd><!--2020-03-29 psargent-->explain how clicking works</dd>
<dt><!--2020-03-26 psargent-->Wallets and new-cave</dt>
<dd><!--2020-03-26 psargent-->Explain (in the wallets process) how to view the surveys
@ -64,6 +73,7 @@
</dl>
<h2>Photos</h2>
<dl>
<dt><!--2020-03-26 psargent-->Capitalisation in filenames problem
<dd><!--2020-03-26 psargent-->run the duplicate filename script on the server in
@ -137,6 +147,7 @@
</dl>
<hr>
<!-- ------------------- Do not touch anything below here ------------------------>
<!--2020-03-26--> Testing area..
<div id="demo">Demonstation as initially read from disc</div>
<script>
@ -144,6 +155,45 @@ document.getElementById("demo").innerHTML = "Demonstation innerHTML change CONFI
</script>
<!--Bother. The DOM is not carried across to the _edit page. It looks like the _edit page just re-reads
the original file from disc. So storing changes done by js will mean working directly with the POST action and a form. -->
<script>
var itemlist = document.getElementsByTagName('dd');
for (i = 0; i < itemlist.length; i++) {
itemlist[i].onclick = hideable;
}
var itemlist = document.getElementsByTagName('dt');
for (i = 0; i < itemlist.length; i++) {
itemlist[i].onclick = showable;
}
function showable () {
// When clicking on a <dt> item, show or not all the following <dd> elements
if (this.style.fontStyle !== "italic") {
this.style.fontStyle = "italic";
} else {
this.style.fontStyle = "normal";
}
var ddO = this.nextElementSibling;
while((ddO !== null) && (ddO.nodeName.toLowerCase() == 'dd')){
if (this.style.fontStyle === "italic") {
ddO.style.display = 'none';
} else {
ddO.style.display = 'block';
}
ddO = ddO.nextElementSibling;
}
}
function hideable () {
var x = this;
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<hr /></body>
</html>