Issue project-sunbird#33 feat: Table of content - Design changes

_config.yml

@@ -11,6 +11,7 @@ safe: false
 ga: UA-106552125-1
 anchorPrefix: link
 tocTopTag: h2
+showToggleButton: true
 
 exclude:
 - vendor

_includes/head.html

@@ -30,6 +30,7 @@
 	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 	<script type="text/javascript" src="/js/bootstrap.min.js?{{ site.time | | date: '%d%m%Y'}}"></script>
 	<script type="text/javascript" src="/js/owl.carousel.min.js?{{ site.time | | date: '%d%m%Y'}}"></script>
+	<script type="text/javascript" src="/js/jquery.tocLight.js?{{ site.time | | date: '%d%m%Y'}}"></script>
 
 	<script>
 	  window.dataLayer = window.dataLayer || [];

_layouts/page.html

@@ -52,6 +52,9 @@ <h1>{{ page.title }} </h1>
               e.stopPropagation();
           });
       });
+      $(function() {
+          $.toc.clickHideButton();
+      });
 
   </script>
   </body>

css/toc.scss

@@ -3,7 +3,9 @@
     background-color: #F9F9F9;
     border: 1px solid #AAAAAA;
     font-size: 95%;
-    padding: 5px;
+    padding: 0;
+    width:auto;
+    margin:0;
 }
 #toc h2, .toc h2 {
     border: medium none;
@@ -41,5 +43,16 @@
 }
 
 #toc-container {
-	margin-bottom: 10px;
-}
+	margin:0 0 10px 10px;
+	float:right;
+}
+#toc-container #toc td{
+    white-space: normal;
+}
+#toc-container #toc ul li a{
+	display:flex;
+} 
+.toctext {
+	display:inline-block;
+	padding-left:5px;
+}

js/jquery.tocLight.js

@@ -0,0 +1,57 @@
+/*
+ * jQuery Table of Content Generator Support for Jekyll v1.0
+ *
+ * https://github.com/dafi/jekyll-tocmd-generator
+ * Examples and documentation at: https://github.com/dafi/jekyll-tocmd-generator
+ *
+ * Requires: jQuery v1.7+
+ *
+ * Copyright (c) 2013 Davide Ficano
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+(function($) {
+    $.toc = {};
+    $.toc.clickHideButton = function(settings) {
+        var config = {
+            saveShowStatus: false,
+            hideText: 'hide',
+            showText: 'show'};
+
+        if (settings) {
+            $.extend(config, settings);
+        }
+
+        $('#toctogglelink').click(function() {
+            var ul = $($('#toc ul')[0]);
+
+            if (ul.is(':visible')) {
+                ul.hide();
+                $(this).text(config.showText);
+                if (config.saveShowStatus) {
+                    $.cookie('toc-hide', '1', { expires: 365, path: '/' });
+                }
+                $('#toc').addClass('tochidden');
+            } else {
+                ul.show();
+                $(this).text(config.hideText);
+                if (config.saveShowStatus) {
+                    $.removeCookie('toc-hide', { path: '/' });
+                }
+                $('#toc').removeClass('tochidden');
+            }
+            return false;
+        });
+
+        if (config.saveShowStatus && $.cookie('toc-hide')) {
+            var ul = $($('#toc ul')[0]);
+
+            ul.hide();
+            $('#toctogglelink').text(config.showText);
+            $('#toc').addClass('tochidden');
+        }
+
+    }
+})(jQuery);