Chuck Sigmund asked for some help in the Adobe Captivate Users LinkedIn Group. He needs to create a multi-level menu.

My solution uses a bit of JavaScript/Jquery trickery and I only built it for the Responsive output.

I add a “>” to the beginning of the slide name of any slide I want to indent (ex: >Level 2 slide”).
Then I run this JS when the course loads:

$( ".tocText nobr:contains('>')" ).each(function( index ) {
	var str = $( this ).text()
	var res = str.replace(/>/g, "  ");
  	$( this ).html(res)
  	$(this).parent().siblings(".tocBookmark").css("left", 20)
});

That code will will check all the TOC entries (.tocText) to see if they contain a “>”.
Then it replaces the “>” with two spaces ( “  ”).
And finally it finds the items bullet point and moves it to the left as well.
It’s not perfect… but it’s a great starting point.

Leave a comment if you tweak this or if you have any questions.
Contact me if you have an eLearning Puzzle you need to solve.