Add expand and collapse buttons

geodynamics · Jan 4, 2019 · c34781e · c34781e
1 parent a0b22a9
commit c34781e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/doc/parameter_view/parameters.js b/doc/parameter_view/parameters.js
@@ -31,6 +31,43 @@ function demangleStrings() {
   return;
 }
 
+function expand(collection) {
+  var i;
+  for (i = 0; i < collection.length; i++) {
+    collection[i].classList.add("active");
+    var content = collection[i].nextElementSibling;
+    content.style.display = "block";
+  }
+}
+
+function collapse(collection) {
+  var i;
+  for (i = 0; i < collection.length; i++) {
+    collection[i].classList.remove("active");
+    var content = collection[i].nextElementSibling;
+    content.style.display = "none";
+  }
+}
+
+function expandAll() {
+  var coll = document.getElementsByClassName("collapsible");
+  expand(coll)
+}
+
+function collapseAll() {
+  var coll = document.getElementsByClassName("collapsible");
+  collapse(coll)
+}
+
+function expandAllSubsections() {
+  var coll = document.getElementsByClassName("subsection");
+  expand(coll)
+}
+
+function collapseAllSubsections() {
+  var coll = document.getElementsByClassName("subsection");
+  collapse(coll)
+}
 
 var coll = document.getElementsByClassName("collapsible");
 var i;

diff --git a/doc/parameter_view/parameters.xsl b/doc/parameter_view/parameters.xsl
@@ -10,7 +10,13 @@
 				<link rel="stylesheet" type="text/css" href="parameters.css"></link>
 			</head>
 			<body>
-				<h2>ASPECT input parameters</h2>
+				<h2>
+					ASPECT input parameters  
+					<button onclick="expandAll()">Expand all</button> 
+					<button onclick="collapseAll()">Collapse all</button> 
+					<button onclick="expandAllSubsections()">Expand subsections</button> 
+					<button onclick="collapseAllSubsections()">Collapse subsections</button> 
+				</h2>
 				<ul>
 					<xsl:apply-templates
 						select="ParameterHandler/*" />
@@ -32,7 +38,7 @@
 						</div>
 						        </xsl:when>
 							<xsl:otherwise>
-		                                <div class="collapsible mangled">
+		                                <div class="collapsible subsection mangled">
 							subsection <b> <xsl:value-of select="name()" /> </b>
                                                 </div>
 					</xsl:otherwise>