Accordions in Toc

Hello!

What do you mind by “accordions”.
Show/hide nested items?

Hello and thanks for the answer.
Yes, indeed. I am looking for a way to show and hide the subitems (h2-h6) with a button.

Unfortunately, this is not possible now ??
You may try make this via jQuery + CSS.

Do you have a starting point how I can pack the heading elements h1 into an accordion? My JS knowledge is not that good. I would be very pleased if you could give me an approach.

On JS need hide all children items and add element before top level items for show/hide childrens.

That seems logical to me. How do I put your short code into this JS? How can I make sure that the accordion works with every TOC.

Need JS-developer for make this task.

Thanks for the advice. Unfortunately I don’t have a JS developer who can support me currently. Too bad ??

Try this code.

JS:

(function($) {
	$('.lwptoc_item > .lwptoc_itemWrap').hide().before('<b class="tocToggle tocToggle-hidden"></b>');
	$('.tocToggle').click(function() {
		var $this = $(this), $el = $(this).next();
		if ($this.hasClass('tocToggle-hidden')) {
			$el.show();
			$this.removeClass('tocToggle-hidden')
		} else {
			$el.hide();
			$this.addClass('tocToggle-hidden')
		}
	});
})(jQuery);

CSS:

.lwptoc .lwptoc_item { position: relative; }
.tocToggle { position: absolute; left: -24px; top: 0; cursor: pointer; }
.tocToggle:before { content: '▲'; }
.tocToggle-hidden:before { content: '▼'; }

Thank you very much. Let me try the code.

Unfortunately your script/css does not work. The accordion is not visible on the page. I call the script after jquery was loaded. Too bad ??

Show page URL.

Hello, unfortunately I cannot show you the site because it is under development. I have changed the code structure after a long time of trial and error – actually there shouldn’t be any difference, but there was.
Now it works with the accordions – thanks for your help

jQuery(document).ready(function () {

	jQuery('.lwptoc_item > .lwptoc_itemWrap').hide().before('<b class="tocToggle tocToggle-hidden"></b>');
	jQuery('.tocToggle').click(function () {
		var $this = jQuery(this),
			$el = jQuery(this).next();
		if ($this.hasClass('tocToggle-hidden')) {
			$el.show();
			$this.removeClass('tocToggle-hidden')
		} else {
			$el.hide();
			$this.addClass('tocToggle-hidden')
		}
	});
	
})

Good! I glad what your task is resolved ??

@f3rdal If you have a time, please rate the plugin here: https://www.ads-software.com/support/plugin/luckywp-table-of-contents/reviews/#new-post