Table of contents for the IPython Notebook automatically generated from the headers using jquery. Possible to hide/show not to occupy much space and put the generated toc in the beginning of the file in a specified <div id="toc-static"></div>

ipnb_table_of_contents_v2.ipnb

{
 "metadata": {
  "name": "ipnb_table_of_contents_v2.ipnb"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": "Contents"
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": "<div id=\"toc-static\"></div>"
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": "Introduction"
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": "Model and Approach"
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": "Model: Scattering Decomposition"
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": "Polarization Ratio"
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": "Polarization Difference"
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": "Summary"
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": "References"
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": "Following is"
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": "The code itself"
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": "**TOC**\n<div id=\"toc-wrapper\">\n    <div class=\"header\">Contents <a href=\"#\" class=\"hide-btn\">[hide]</a></div>\n    <div id=\"toc\"></div>\n</div>\n\n<style>\n  #toc-wrapper {\n    position: fixed; top: 113px; max-width:430px; right: 28px;\n    border: thin solid rgba(0, 0, 0, 0.38); opacity: .8;\n    border-radius: 5px; background-color: #fff; padding:10px;\n  }\n  #toc-wrapper.closed {\n      min-width: 100px;\n      width: auto;\n      transition: width;\n  }\n  #toc-wrapper:hover{\n      opacity:1;\n  }\n  #toc-wrapper .header {\n      font-size:18px; font-weight: bold;\n  }\n  #toc-wrapper .hide-btn {\n      font-size: 14px;\n  }\n\n</style>\n<style>\n  ol.nested {\n    counter-reset: item;\n    list-style: none;\n  }\n  li.nested {\n        display: block;\n    }\n  li.nested:before {\n        counter-increment: item;\n        content: counters(item, \".\")\" \";\n    }\n </style>\n<script>\n$(function(){\n\n  function list_el(h){\n    href = $(h).find('a').attr('href')\n    text = $(h).find('a').text()\n    return \"<a href='\" + href + \"'>\" + text + \"</a>\"\n  }\n\n  function lvl(header){\n    if (header !== undefined)\n      return $(header).prop('tagName').toLowerCase().substring(1);\n    else return 0;\n  }\n\n  window.toc = function(){\n  headers = $('h2, h3, h4');\n  html = \"<ol class='nested'>\";\n  \n  $.each(headers , function(i, h) {\n    if (lvl(h) == lvl(headers[i+1])) {\n      html += \"<li class='nested'>\" + list_el(h) + \"</li>\" ;\n    }\n    else if ( lvl(h) < lvl(headers[i+1]) ) {\n      html += \"<li class='nested'>\" + list_el(h) + \"<ol class='nested'>\";\n    }\n    else if (lvl(h) > lvl(headers[i+1])) {\n      html += \"<li class='nested'>\"+ list_el(h) +\"</li></ol></li>\";\n    }\n  }) \n  html += \"</ol>\"\n  \n  $('#toc').html(html)\n  $('#toc-wrapper .header').click(function(){\n      $('#toc').slideToggle()\n      $('#toc-wrapper').toggleClass('closed')\n      if ($('#toc-wrapper').hasClass('closed')){\n        $('#toc-wrapper .hide-btn').html('[show]')\n      } else {\n          $('#toc-wrapper .hide-btn').html('[hide]')\n      }\n      return false\n  })\n  $('#toc-static').html(html)\n  }\n  toc()\n  \n\n})\n</script>"
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": "**TOC**\n<div id=\"toc-wrapper\">\n    <div class=\"header\">Contents <a href=\"#\" class=\"hide-btn\">[hide]</a></div>\n    <div id=\"toc\"></div>\n</div>\n\n<style>\n  #toc-wrapper {\n    position: fixed; top: 113px; max-width:430px; right: 28px;\n    border: thin solid rgba(0, 0, 0, 0.38); opacity: .8;\n    border-radius: 5px; background-color: #fff; padding:10px;\n  }\n  #toc-wrapper.closed {\n      min-width: 100px;\n      width: auto;\n      transition: width;\n  }\n  #toc-wrapper:hover{\n      opacity:1;\n  }\n  #toc-wrapper .header {\n      font-size:18px; font-weight: bold;\n  }\n  #toc-wrapper .hide-btn {\n      font-size: 14px;\n  }\n\n</style>\n<style>\n  ol.nested {\n    counter-reset: item;\n    list-style: none;\n  }\n  li.nested {\n        display: block;\n    }\n  li.nested:before {\n        counter-increment: item;\n        content: counters(item, \".\")\" \";\n    }\n </style>\n<script>\n$(function(){\n\n  function list_el(h){\n    href = $(h).find('a').attr('href')\n    text = $(h).find('a').text()\n    return \"<a href='\" + href + \"'>\" + text + \"</a>\"\n  }\n\n  function lvl(header){\n    if (header !== undefined)\n      return $(header).prop('tagName').toLowerCase().substring(1);\n    else return 0;\n  }\n\n  window.toc = function(){\n  headers = $('h2, h3, h4');\n  html = \"<ol class='nested'>\";\n  \n  $.each(headers , function(i, h) {\n    if (lvl(h) == lvl(headers[i+1])) {\n      html += \"<li class='nested'>\" + list_el(h) + \"</li>\" ;\n    }\n    else if ( lvl(h) < lvl(headers[i+1]) ) {\n      html += \"<li class='nested'>\" + list_el(h) + \"<ol class='nested'>\";\n    }\n    else if (lvl(h) > lvl(headers[i+1])) {\n      html += \"<li class='nested'>\"+ list_el(h) +\"</li></ol></li>\";\n    }\n  }) \n  html += \"</ol>\"\n  \n  $('#toc').html(html)\n  $('#toc-wrapper .header').click(function(){\n      $('#toc').slideToggle()\n      $('#toc-wrapper').toggleClass('closed')\n      if ($('#toc-wrapper').hasClass('closed')){\n        $('#toc-wrapper .hide-btn').html('[show]')\n      } else {\n          $('#toc-wrapper .hide-btn').html('[hide]')\n      }\n      return false\n  })\n  $('#toc-static').html(html)\n  }\n  toc()\n  \n\n})\n</script>",
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}