---
layout: project
---
<h1>jquery.tokko.js - Generates a table of contents and anchors based on document headers</h1>
<p>jquery.tokko.js has been designed to make it easier to provide decent navigation for guides, tutorials and such. Pretty much all you need to do is to include the build into your site and then execute <code>$parent.tokko();</code>. It will generate an element containing a table of contents. It also attaches some anchors to headers to speed up navigation.

</p>
<p>jquery.tokko.js works great with <a href="http://flesler.blogspot.fi/2007/10/jquerylocalscroll-10.html">jQuery.LocalScroll</a>. Use that if you want some spiffy animations on your site.

</p>
<p>h1&#39;s are excluded out of the TOC by design. If you think otherwise or have any other development ideas, use the <a href="https://github.com/bebraw/jquery.tokko.js">issue tracker</a>.

</p>
<h2>Projects using jquery.tokko.js</h2>
<ul>
<li><a href="http://yeswejekyll.com">Yes We Jekyll</a></li>
</ul>
<h2>Acknowledgments</h2>
<ul>
<li><a href="https://github.com/mieky">mieky</a> came up with the name</li>
<li><a href="https://github.com/nikcorg">nikcorg</a> added CSS transitions</li>
</ul>
<h2>Placeholder</h2>
<p>This is just some placeholder to make the demo more effective.

</p>
<h3>Just Some Cat</h3>
<p><img src="http://placekitten.com/g/200/300" alt="Just some cat image" />

</p>
<h3>And Another One</h3>
<p><img src="http://placekitten.com/g/300/300" alt="Another cat image" />

</p>
<h2>License</h2>
<p>jquery.tokko.js is available under MIT. See LICENSE for more details.
</p>