Navigation Treeview Example: Convert to single page example with functionality equivalent to disclosure navigation example

cspell.json

@@ -212,6 +212,7 @@
         "treeitem",
         "Treeview",
         "Tryens",
+        "tuition",
         "uncheck",
         "Unchecking",
         "unchecks",

examples/treeview/css/treeview-navigation.css

@@ -0,0 +1,122 @@
+#ex1 header {
+  border: #005a9c solid 2px;
+  background: #005a9c;
+  color: white;
+  text-align: center;
+}
+
+#ex1 header .title {
+  font-size: 2.5em;
+  font-weight: bold;
+  font-family: serif;
+}
+
+#ex1 header .tagline {
+  font-style: italic;
+}
+
+#ex1 footer {
+  border: #005a9c solid 2px;
+  background: #005a9c;
+  font-family: serif;
+  color: white;
+  font-style: italic;
+  padding-left: 1em;
+}
+
+#ex1 .body {
+  display: grid;
+  grid-template-columns: auto auto;
+  border: #eee solid 2px;
+}
+
+#ex1 .body nav {
+  margin: 0;
+  padding: 0.5em;
+  width: 17em;
+  height: 50em;
+  background: #eee;
+}
+
+#ex1 .body .page {
+  margin: 0.25em;
+  padding: 0.25em;
+  height: 30em;
+}
+
+#ex1 .body .page h1 {
+  margin: 0;
+  padding: 0;
+}
+
+.treeview-navigation ul,
+.treeview-navigation li {
+  margin: 0;
+  padding: 0;
+  padding-left: 1em;
+}
+
+.treeview-navigation[role="tree"] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.treeview-navigation[role="tree"] li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.treeview-navigation[role="tree"] a {
+  text-decoration: underline;
+  border-color: transparent;
+}
+
+.treeview-navigation [role="treeitem"] ul {
+  margin: 0;
+  padding: 0;
+  margin-left: 0.5em;
+}
+
+.treeview-navigation [role="treeitem"][aria-expanded="false"] + [role="group"] {
+  display: none;
+}
+
+.treeview-navigation [role="treeitem"][aria-expanded="true"] + [role="group"] {
+  display: block;
+}
+
+.treeview-navigation [role="treeitem"][aria-expanded="false"] > span::before {
+  content: url(../images/right-arrow-brown.png);
+  position: relative;
+  left: -0.25em;
+}
+
+.treeview-navigation [role="treeitem"][aria-expanded="true"] > span::before {
+  content: url(../images/down-arrow-brown.png);
+  position: relative;
+  left: -0.25em;
+}
+
+.treeview-navigation a[role="treeitem"] {
+  width: 16em;
+  margin: 0;
+  padding: 4px;
+  text-decoration: none;
+}
+
+/* disable default keyboard focus styling for treeitems
+   Keyboard focus is styled with the following CSS */
+
+.treeview-navigation [role="treeitem"]:focus {
+  outline: 0;
+  background-color: #ddd;
+  padding: 2px;
+  border: 2px black solid;
+}
+
+.treeview-navigation [role="treeitem"]:hover {
+  background-color: #ccc;
+  text-decoration: underline;
+}

examples/treeview/js/navigation-content-generator.js

@@ -0,0 +1,26 @@
+/*
+*   This content is licensed according to the W3C Software License at
+*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*
+*   File: navigation-content-generator.js
+*/
+
+"use strict";
+
+var NavigationContentGenerator = function (name) {
+
+  this.name = name;
+  this.fillerTextSentences = [];
+
+  this.fillerTextSentences.push('The content on this page is associated with the $title link for $name.');
+  this.fillerTextSentences.push('The text content in this paragraph is filler text providing a detectable change of content when the $title link is selected from the menu.  ');
+  this.fillerTextSentences.push('$name doesn\'t really exist, but the use of an organizational name is useful to provide content for the $title link.  ');
+  this.fillerTextSentences.push('Since $name doesn\'t exist there really is no real content associated with the $title link.');
+};
+
+NavigationContentGenerator.prototype.generateParagraph = function (title) {
+  var content = '';
+  this.fillerTextSentences.forEach(s => content += s.replace('$name', this.name).replace('$title', title));
+  return content;
+}
+