Doesn’t work with TranslatePress

I have a proof of concept that uses

$(‘span.toc_toggle a’).addClass(‘toc_toggle_show’)

or

$(‘span.toc_toggle a’).addClass(‘toc_toggle_hide’)

to set a class on the hide/show link, and uses

if ($(this).hasClass(‘toc_toggle_hide’)) { … } else { … }

to test the class. Now it works with the TranslatePress plugin.

Hello @apbarrett,

I concur (having the same problem of yours with my translated version via TranslatePress).

I would be interested in having the complete code you’re using, even if it implies changing the core JS code of the plugin.

Could you share it, before it gets included (hopefully) in next update ?

Here’s my code, and instructions for editing your installation.

First, make a backup of your site.

Then go to the admin interface of your WordPress site. In the side menu, select Plugins -> Plugin Editor. In the plugin editor, select Table of Contents Plus. In the list of files, select front.js.

In the editor window, scroll down until about line 133, where you should see this

$('#toc_container p.toc_title').append(' <span class="toc_toggle">[<a href="#">' + visibility_text + '</a>]</span>');

Replace everything from that line until the end of file (around line 170) with the following code:

                   $('#toc_container p.toc_title').append(' <span class="toc_toggle">[<a href="#">' + visibility_text + '</a>]</span>');
			if ( visibility_text == tocplus.visibility_show ) {
				$('ul.toc_list').hide();
				$('#toc_container').addClass('contracted').shrinkTOCWidth();
				$('span.toc_toggle a').addClass('toc_toggle_show');
			} else {
				$('span.toc_toggle a').addClass('toc_toggle_hide');
			}
	
			$('span.toc_toggle a').click(function(event) {
				event.preventDefault();
				if ($(this).hasClass('toc_toggle_hide')) {
					    $(this).removeClass('toc_toggle_hide');
						$(this).addClass('toc_toggle_show');
						$(this).html(tocplus.visibility_show);
					
						if ( $.cookie ) {
							if ( invert )
								$.cookie('tocplus_hidetoc', null, { path: '/' });
							else
								$.cookie('tocplus_hidetoc', '1', { expires: 30, path: '/' });
						}
						$('ul.toc_list').hide('fast');
						$('#toc_container').addClass('contracted').shrinkTOCWidth();

				} else { // must have class 'toc_toggle_show'
					    $(this).removeClass('toc_toggle_show');
						$(this).addClass('toc_toggle_hide');
						$(this).html(tocplus.visibility_hide);

						if ( $.cookie ) {
							if ( invert )
								$.cookie('tocplus_hidetoc', '1', { expires: 30, path: '/' });
							else 
								$.cookie('tocplus_hidetoc', null, { path: '/' });
						}
						$('#toc_container').css('width', tocplus.width).removeClass('contracted');
						$('ul.toc_list').show('fast');
				}
			});
		}
	}
});

Save the front.js file.

Select all and copy the entire contents of front.js into front.min.js. front.min.js is supposed to be a minified version of front.js, but we’ll just make it an identical copy, not minified.

Save the front.min.js file.

Test it. Restore from backup if it doesn’t work.

Thank you !