toc logic

_config.yml

@@ -4,7 +4,7 @@ kramdown:
   input: GFM
   html_to_native: true
   hard_wrap: false
-  use_coderay: true
+  enable_coderay: true
 baseurl: /
 
 safe: false

_includes/tree.html

@@ -1,6 +1,53 @@
+	<!--
 
-<ul {% if subsection %}style="display: none; opacity: 0; margin-left: 15px;"{% endif %}>
+		Here's your API ref for this accordion element:
+
+		Each line is class "item". Use the data-title attribute for the text label.
+		Use a.item for direct links; use div.item to wrap containers.
+
+		A div.container inside a div.item is a nested accordion. The clickable text which toggles the
+		container open/closed is the data-title attribute of the parent div.item.
+
+	
+		
+			<a class="item" data-title="Overview" href="path-to-page"></a>
+
+			<div class="item" data-title="Quickstarts">
+				<div class="container">
+					<a class="item" data-title="Setting Up Your Local Environment" href="path-to-page"></a>
+					<a class="item" data-title="5-minute Quickstart" href="path-to-page"></a>
+					<a class="item" data-title="Kubernetes 101" href="path-to-page"></a>
+					<a class="item" data-title="Kubernetes 201" href="path-to-page"></a>
+				</div>
+			</div> 
+
+			<div class="item" data-title="Running Kubernetes">
+				<div class="container">
+					<a class="item" data-title="Running Kubernetes on Your Local Machine" href="path-to-page"></a>
+					<a class="item" data-title="Running Kubernetes on Google Container Engine" href="path-to-page"></a>
+					<div class="item" data-title="Third-level Schtuff">
+						<div class="container">
+							<a class="item" data-title="Third Level One" href="path-to-page"></a>
+							<a class="item" data-title="Third Level Two" href="path-to-page"></a>
+							<a class="item" data-title="Third Level Three" href="path-to-page"></a>
+							<a class="item" data-title="Third Level Four" href="path-to-page"></a>
+						</div>
+					</div>
+					<a class="item" data-title="Running Kubernetes on Turn-Key Cloud Solutions" href="path-to-page"></a>
+					<a class="item" data-title="Running Kubernetes on Custom Solutions" href="path-to-page"></a>
+				</div>
+			</div> 
+			-->
 {% for item in tree %}
+	{% if item.section %}
+    <div class="item" data-title="{{ item.title }}">
+    	<div class="container">
+            {% assign tree = item.section %}
+            {% assign subsection=true %}
+            {% include tree.html %}
+        </div>
+    <div>
+    {% else %}
     
         {% if item.status %}
           {% capture statusHTML %} <sup style="color: red">{{item.status}}</sup>{% endcapture %}
@@ -8,38 +55,14 @@
           {% assign statusHTML = "" %}
         {% endif %}
         
-    {% if item.section %}
-      {% capture sectionHTML %}<a class="tlw-control tlw-collapsed">▸</a>{% endcapture %}
-    {% else %}
-      {% assign sectionHTML = "" %}
-    {% endif %}
-    
-    
         {% if item.path %}
           {% if page.url | remove: ".html" | remove "index" == item.path %}
             {% capture tocItemColor %}style="color:red;"{% endcapture %}
           {% else %}
-        {% capture tocItemColor %}{% endcapture %}
+            {% assign tocItemColor = "" %}
-      {% endif %}
-      <li {{ tocItemColor }}>{{ sectionHTML }}<a href="{{ item.path }}" title="{{ item.title }}" data-title="{{ item.title }} - {{ item.path }}"><span>{{ item.title }} {{ statusHTML }}</span></a></li>
-    {% else %}
-      {% if item.include %}
-        {% assign tree = site.data[item.include].toc %}
-        {% assign subsection=false %}
-        {% include tree.html %}
-      {% else %}
-        <li>{{ sectionHTML }}<span class="tlw-title tlw-control-title" data-title="{{ item.title }}">{{ item.title }}{{ statusHTML }}</span></li>
           {% endif %}
         {% endif %}
         
-    {% if item.break %}
+        <a class="item" {{ tocItemColor }} href="{{ item.path }}" title="{{ item.title }}" data-title="{{ item.title }} - {{ item.path }}">{{ item.title }}{{ statusHTML }}</a>
-      <hr>
-    {% endif %}
-    
-    {% if item.section %}
-      {% assign tree = item.section %}
-      {% assign subsection=true %}
-      {% include tree.html %}
     {% endif %}
 {% endfor %}
-</ul>

_layouts/docwithnav.html

@@ -17,49 +17,10 @@ layout: headerfooter
 
 <section id="encyclopedia">
 	<div id="docsToc">
+        <div class="pi-accordion">
             {% comment %} assign tree = site.data[page.toc].toc 
             {% assign tree = site.data[page.versionfilesafe][page.section].toc %}
             {% include tree.html %}{% endcomment %}
-		<!--
-
-		Here's your API ref for this accordion element:
-
-		Each line is class "item". Use the data-title attribute for the text label.
-		Use a.item for direct links; use div.item to wrap containers.
-
-		A div.container inside a div.item is a nested accordion. The clickable text which toggles the
-		container open/closed is the data-title attribute of the parent div.item.
-
-		-->
-
-		<div class="pi-accordion">
-			<a class="item" data-title="Overview" href="path-to-page"></a>
-
-			<div class="item" data-title="Quickstarts">
-				<div class="container">
-					<a class="item" data-title="Setting Up Your Local Environment" href="path-to-page"></a>
-					<a class="item" data-title="5-minute Quickstart" href="path-to-page"></a>
-					<a class="item" data-title="Kubernetes 101" href="path-to-page"></a>
-					<a class="item" data-title="Kubernetes 201" href="path-to-page"></a>
-				</div>
-			</div> <!-- /quickstarts -->
-
-			<div class="item" data-title="Running Kubernetes">
-				<div class="container">
-					<a class="item" data-title="Running Kubernetes on Your Local Machine" href="path-to-page"></a>
-					<a class="item" data-title="Running Kubernetes on Google Container Engine" href="path-to-page"></a>
-					<div class="item" data-title="Third-level Schtuff">
-						<div class="container">
-							<a class="item" data-title="Third Level One" href="path-to-page"></a>
-							<a class="item" data-title="Third Level Two" href="path-to-page"></a>
-							<a class="item" data-title="Third Level Three" href="path-to-page"></a>
-							<a class="item" data-title="Third Level Four" href="path-to-page"></a>
-						</div>
-					</div>
-					<a class="item" data-title="Running Kubernetes on Turn-Key Cloud Solutions" href="path-to-page"></a>
-					<a class="item" data-title="Running Kubernetes on Custom Solutions" href="path-to-page"></a>
-				</div>
-			</div> <!-- /running kubernetes -->
         </div> <!-- /pi-accordion -->
 	</div> <!-- /docsToc -->
 	<div id="docsContent">

_site/index.html

@@ -74,19 +74,16 @@
 
 <section id="encyclopedia">
 	<div id="docsToc">
+        <div class="pi-accordion">
             
-        
+        </div> <!-- /pi-accordion -->
-		
+	</div> <!-- /docsToc -->
-<ul >
-  
-</ul>
-
-	</div>
 	<div id="docsContent">
 		Yep.
 	</div>
 </section>
 
+
 <footer>
 	<main class="light-text">
 		<nav>