Mini TOC within an online topic

[estherashbaugh]

I am a new Flare user. Is there a way to create a mini TOC that includes the headings used inside a topic? This is for online output. Everything I read talks about mini TOCs that link to the topics in the main TOC. What I want is a topic-level TOC that shows the lower-level headings inside the topic but not in the main TOC. Seems like this feature is available for print output. Is there a way to do it for online output?

[Nita Beck]

Welcome to the forums! We're glad you're here.

There is no out-of-the-Flare-box solution to offer. Many of us have asked that the miniTOC functionality be extended to support this use case, but I suspect that would require MadCap's redesigning how miniTOCs work, given that they currently operate on one's TOC file (specifically on a book with children), not on headings within a given topic.

I can't readily get my fingers on other forum discussions over the years in which folks have offered clever solutions for achieving what you're after. Maybe others can point you in their directions. How I've achieved this is to build cross-references, by hand, to the subsections within a given topic.

[Mike Kelley]

I use a 3rd party tool called Tocofiy (by Greg Franko). To implement it you need to include a stripped-down version of jQuery-UI (his script needs access to the Widget Factory) and the Tocify script.

See it in action: https://i.imgur.com/AjySFop.gif

At the end of my masterpage I put:

Code: Select all

<script type="text/javascript" src="../Scripts/jquery-ui.js"></script>
<script type="text/javascript" src="../Scripts/jquery.tocify.js"></script>

<script type="text/javascript">
$(document).ready(function () {
var headingCount = $("h2,h3,h4,h5").length;

        if (headingCount > 1) {
                $("#toc").tocify({
                        showEffect: "fadeIn",
                        selectors: "h2,h3,h4,h5"
                });
        }
});
</script>

I also had to copy Tocify's CSS file to the folder where all my CSS is stored and imported it from my master CSS file with this:

Code: Select all

@import url('jquery.tocify.css');

I didn't like the default styles so I updated the Tocify CSS with this: http://pastebin.com/V82Z4v6n