Collapsible TOC

[CopticMonk]

I'm trying to modify the Table of Contents in the 'totc' example to be able hide/unhide child nodes when I click on the parent. So in the TOC, if i have:
-Title1

---Subtitle_1a

---Subtitle_1b

-Title2

Clicking on Title1 would hide the subtitles and clicking again would unhide it. I tried modifying parts of the contents.js, but was unable to achieve this thus far.

I'm new to Javascript so any tips/instructions would be much appreciated.
If this isn't the right place to ask the question, please let me know where I could get help.

Thanks!

[joseph]

Take a look at Monocle.listenForTap as a way to easily support mouse and touch events. It's in src/events.js.

You'd want to more or less copy & paste the code of the contents control and modify it to your intentions — they're not really designed for extensibility, but they're small and atomic enough to duplicate.

It's not clear how your interface works — if clicking on Title1 shows/hides the child headings, instead of navigating to Title1 in the book, how do you navigate to Title1? You could put arrow icons to the side of chapters with children, and put the tap event listeners on those icons.

I can't think of a way to answer this with any greater specificity.

[Yos-A]

I have same question. I want subtitle to disappear and appear. I can do arrow on side of title, but dont understand how to do it.

[CopticMonk]

Thank you Joseph. I will look at it and give this another shot. To answer your question regarding my interface, I could use the arrow icons idea so that clicking on the arrow expands and collapses the titles/subtitles. The reason, it didn't matter to me whether or not clicking on Title1 takes you to the right place in the book is that the books I am working with all have a Title followed by the 1st subtitle right under it.

If you have any more tips on implementing the arrow solution, please let me know. Thanks again!

[joseph]

Closing this one.