Added TODO for collapsable lists

nigelhorne · Aug 8, 2024 · fff0490 · fff0490
1 parent daa6836
commit fff0490
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 18 deletions.
diff --git a/dynamic-site/css/mobile.css b/dynamic-site/css/mobile.css
@@ -73,3 +73,27 @@ a,.myButton {
 .myButton:active {
 	top:1px
 }
+
+/* https://www.w3schools.com/howto/howto_js_collapsible.asp */
+.collapsible {
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+}
+
+.active, .collapsible:hover {
+  background-color: #555;
+}
+
+.content {
+  padding: 0 18px;
+  display: none;
+  overflow: hidden;
+  background-color: #f1f1f1;
+}
diff --git a/dynamic-site/css/web.css b/dynamic-site/css/web.css
@@ -35,7 +35,7 @@ table {
 	width:940px;
 	text-align:center;
 }
- 
+
 #container {
 	margin:0 auto;
 	overflow:auto;
@@ -73,31 +73,31 @@ table {
 	font-size: 0.8em;
 }
 
-h2 {                                            
-        /* position: relative;          
-        top:3em;                        
-        border: 2px solid #2c4eac; */           
+h2 {
+        /* position: relative;
+        top:3em;
+        border: 2px solid #2c4eac; */
         width: 85%;
-        margin: auto;                   
-        color:#2C4EAC;          
+        margin: auto;
+        color:#2C4EAC;
         line-height: 2em;
-}                       
+}
 
-h3 {                                            
-        color:#2C4EAC;          
+h3 {
+        color:#2C4EAC;
         width: 80%;
-        margin: auto;                   
+        margin: auto;
 }
-                                
+
 /* http://accessify.com/tools-and-wizards/developer-tools/list-o-matic/ */
-ul#nav {                                        
-        color:#2c4eac;                                  
+ul#nav {
+        color:#2c4eac;
         font-family:helvetica,arial,sans-serif;margin:0;padding:0;width:30em
-}                                               
-ul#nav li {                             
+}
+ul#nav li {
         margin:0;padding:0;list-style:none;margin:0 0 0.3em 0;color:#2c4eac;margin-left:10em;
-}                       
-ul#nav li a {   
+}
+ul#nav li a {
         color:#2c4eac;
         text-decoration:none;display:block;padding:0.3em 0.5em;border:1px solid silver;background:#fff
 }
@@ -141,3 +141,27 @@ ul#nav li a:hover {
 myButton:active {
 	top:1px
 }
+
+/* https://www.w3schools.com/howto/howto_js_collapsible.asp */
+.collapsible {
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+}
+
+.active, .collapsible:hover {
+  background-color: #555;
+}
+
+.content {
+  padding: 0 18px;
+  display: none;
+  overflow: hidden;
+  background-color: #f1f1f1;
+}
diff --git a/ged2site b/ged2site
@@ -30,6 +30,7 @@
 # TODO: consider Data::Dumper::Names instead of Data::Dumper
 # TODO: investigate User::Identity
 # TODO: handle https://www.compart.com/en/unicode/U+25CF in notes as <li>
+# TODO: collapsable lists: https://www.w3schools.com/howto/howto_js_collapsible.asp
 
 # -d:	Download copies of objects rather than link to them, useful if the
 #	objects are on pay sites such as FMP