CleverTOC with inline filtering

Example 3

This third example does the same as before, but in this case the template to be cloned is a div. It also has a list of keywords, which are populated from a keyword template for each keyword returned in the record. The template looks like this (the javascript is the same as above, but using template2 instead). Note that we can have more than one of these operations in a page. The template has a class called ".box", which is styles in the css for the page, so that every item created from the template has that styling.

<div class="clevertoc">
     <div class="template2 hidden box"><a href="/" class="link"><span class="title">title</span></a> <br />
          <span class="description">blah</span><br />
          <span class="keywords"><span class="keyword"><sub><span class="kwtitle"></span> | </sub></span></span>
     </div>
</div>

As before, we make a CTOC and call its constructor. The methods cloneAndFillElement is the default method for copying the elements and the keywords (you can provide a different method if needed). The toggleMe method is the default method for selecting and deselecting keywords.

jQuery(document).ready(function(){
     var CTOC2 = new CleverTOC(url, cloneAndFillElement, toggleMe, ".template2"); 
     CTOC2.doCleverTOC(); 
 });