Shortcode for table of content

table-of-contents.php

<?php

add_shortcode( 'toc', 'toc' );
function toc( $atts ) {

	$atts = shortcode_atts(
		array(
			'levelone'  	=> 'h2',
			'leveltwo'     	=> '',
			'levelthree'	=> ''
		), 
		$atts, 'toc'
	);
	
	if ( $atts['leveltwo'] ) {
		$dataLevelTwo = ' data-level-two="' . $atts['leveltwo'] . '"';
	} else {
		$dataLevelTwo = '';
	}
	
	if ( $atts['levelthree'] ) {
		$dataLevelThree = ' data-level-three="' . $atts['levelthree'] . '"';
	} else {
		$dataLevelThree = '';
	}
	
	return '<div id="tocWrapper" data-level-one="' . $atts['levelone'] . '"' . $dataLevelTwo . $dataLevelThree . '>
				<div class="toc-header">
					<h6>Contents</h6>
					<span>[hide]</span>
				</div>
				<ol></ol>
			</div>';
}

// ADD JS SCRIPT TO FOOTER
add_action( 'wp_footer', 'toc_script' );
function toc_script() { ?>
    <script>
    	jQuery( function($) {	
				$(document).ready(function() {
					if ( $('#tocWrapper').length ) {
						var level1 = $('#tocWrapper').attr('data-level-one');
						var level2 = $('#tocWrapper').attr('data-level-two');
						var level3 = $('#tocWrapper').attr('data-level-three');	

						function appendSpan(level) {
							var index = 1;
							$(".post_content " + level).each(function() { // Replace ".post_content " with your own content wrapper class/id
								$(this).replaceWith(function() {
									if ( $(this).text() ) {
										return '<' + level + '><span id="' + level + '_' + index +'" class="tocTarget">' + $(this).html() + '</span></' + level + '>';
									} else {
										return '<' + level + '>' + $(this).html() + '</' + level + '>';
									}
								});
								index++;
							});	
						}

						appendSpan(level1);
						if (level2) appendSpan(level2);
						if (level3) appendSpan(level3);

						var prevL1Item = null;
						var prevL1List = null;
						var prevL2Item = null;
						var prevL2List = null;

						// Replace ".post_content " with your own content wrapper class/id
						$(".post_content h2, .post_content h3, .post_content h4, .post_content h5, .post_content h6").each(function() {
							var target = $(this).find("span.tocTarget").attr('id');
							if (target) {
								var li = "<li><a href='#" + target + "'>" + $(this).text() + "</a></li>";

								if (level3) {
									if ( $(this).is(level1) ) {
										prevL1List = $("<ol></ol>");
										prevL1Item = $(li);
										prevL1Item.append(prevL1List);
										prevL1Item.appendTo($('#tocWrapper > ol'));
									} else if ( $(this).is(level2) ) {
										prevL2List = $("<ol></ol>");
										prevL2Item = $(li);
										prevL2Item.append(prevL2List);
										prevL2Item.appendTo(prevL1List);
									} else {
										prevL2List.append(li);
									}
								} 

								if ( (level2) && (!level3) ) {
									if ( $(this).is(level1) ) {
										prevL1List = $("<ol></ol>");
										prevL1Item = $(li);
										prevL1Item.append(prevL1List);
										prevL1Item.appendTo($('#tocWrapper > ol'));
									} else {
										prevL1List.append(li);
									}
								}

								if ( (!level2) && (!level3) ) {
									prevL1Item = $(li);
									prevL1Item.appendTo($('#tocWrapper > ol'));
								}
							}
						});

						$(".toc-header span").click(function(){
							$("#tocWrapper > ol").slideToggle(100);
							if ($(this).text() == '[hide]') {
								$(this).text('[show]')
							} else {
								$(this).text('[hide]');
							}
						});

						var speed = 1000;
						$('#tocWrapper a')
							.filter((i, a) => a.getAttribute('href').startsWith('#') || a.href.startsWith(`${location.href}#`))
							.unbind('click.smoothScroll')
							.bind('click.smoothScroll', event => {
							const targetId = event.currentTarget.getAttribute('href').split('#')[1];
							const targetElement = document.getElementById(targetId);

							if (targetElement) {
								event.preventDefault();
								$('html, body').animate({ scrollTop: $(targetElement).offset().top - 150 }, speed);
							}
						});
					}
				});
			});	
    </script>
<?php }
?>