Table of Content (ToC) within accordion slider sections

Here comes a nice function recently developed. Feel free to use it!

/* *** ToC within Enfold accordion sections
 *
 *   Parameters:
 *	accordion		- the accordion(s) on the current page to process
 * 	tocSelector	- selector for identification of ToC entry
 *
 *	If sections in an accordion slider become very long (can happen sometimes, 
 * 	e.g. if used as FAQ), a (clickable) table of content can improve UX 
 *	since the user can jump straight to the desired piece of information. 
 *
 *	avia_accordion_toc() creates tables of content as unordered list within selected 
 *   sections of the Enfold accordion slider. The ToC will be inserted  
 *	right at the beginning of the section where it was created from.
 *	Anchors will be added to each element a ToC entry has been created from.
 *
 *	One or more accordion sliders can be targeted by the first parameter.
 *	The 2nd parameter represents the selector from which aToC entries shall be created.
 *
 *	If the custom class toc_all is present in the accordion, ToCs will be created for every section.
 *	ToCs can be defined individually for each section by adding the tag 'toc' to a single toggle.
 *
 *	The class 'av_toc' is added to the unordered list, so one can style it easily by CSS.
 *
 *	Example: 	avia_accordion_toc(".page-id-99 .togglecontainer", "h4")
 *			This creates ToC entries from the h4 heading tags within
 *			every accordion slider on the wordpress page with id 99.
 *
 */
function avia_accordion_toc(accordion, tocSelector) {
	jQuery(accordion).each(function( acc_index ) {
		var this_accordion = this;
		console.log('Accordion: ' + jQuery(this_accordion).find('p').text().substring(0,20));
		jQuery(this).find(".single_toggle").each(function( content_index) {
			if( (jQuery(this_accordion).hasClass("toc_all")) || (jQuery(this).data("tags").indexOf("{toc}")!=-1)) { // Create ToC for this section?
				var toc = "";
				jQuery(this).find(tocSelector).each(function( toc_index) {
					var my_id = 'acc-' + (acc_index+1).toString() + '-content-' + (content_index+1).toString() + '-entry-' + (toc_index+1).toString();
					jQuery(this).attr('id', my_id);													// Add anchor
					toc += '<li><a href="#' + my_id + '">' + $(this).html() + '</a></li>';					// Add ToC entry
				});
				jQuery( '<ul class="av_toc">' + toc + '</ul>' ).prependTo( $(this).find(".toggle_content")[0] );
			}
		});
	});
}
// *** End of ToC for Enfold accordion

• This topic was modified 5 years, 9 months ago by JVo.