Toggle Text on Click in WordPress Without jQuery

Sometimes a WordPress page needs text that changes when it is clicked: Show more that becomes Show less, a teaser that reveals an answer, or a playful greeting. This snippet toggles text on click: the first click shows the second text, the next click brings back the original, and so on.

It is plain JavaScript, so it works with block themes, which do not load jQuery on the front end. It also works with the keyboard.

The snippet

(function () {
	// ===== Config =====
	var SELECTOR = '.dpc-toggle-text'; // Elements that swap their text on click.
	var OTHER_TEXT = 'Bye!'; // Used when the element has no data-dpc-toggle-text attribute.
	// ===== End of config =====

	function prepare(el) {
		if (el.hasAttribute('data-dpc-original')) {
			return;
		}
		el.setAttribute('data-dpc-original', el.textContent);
		// Make paragraphs, headings and divs usable with the keyboard too.
		if (el.tagName !== 'BUTTON') {
			el.setAttribute('role', 'button');
			if (!el.hasAttribute('tabindex')) {
				el.tabIndex = 0;
			}
		}
	}

	function toggle(el) {
		prepare(el);
		var swapped = el.getAttribute('data-dpc-swapped') === '1';
		el.textContent = swapped ? el.getAttribute('data-dpc-original') : (el.getAttribute('data-dpc-toggle-text') || OTHER_TEXT);
		el.setAttribute('data-dpc-swapped', swapped ? '0' : '1');
	}

	document.querySelectorAll(SELECTOR).forEach(prepare);

	document.addEventListener('click', function (event) {
		var el = event.target.closest(SELECTOR);
		if (el) {
			toggle(el);
		}
	});

	document.addEventListener('keydown', function (event) {
		if (event.key !== 'Enter' && event.key !== ' ') {
			return;
		}
		var el = event.target.closest ? event.target.closest(SELECTOR) : null;
		if (el && el === event.target && el.tagName !== 'BUTTON') {
			event.preventDefault();
			toggle(el);
		}
	});
})();

Add the class dpc-toggle-text to a Paragraph or Heading block (Advanced → Additional CSS class(es)). Its own text is the first text, and the second one is OTHER_TEXT in the script. Each element can have its own second text in a Custom HTML block:

<button type="button" class="dpc-toggle-text" data-dpc-toggle-text="Bye!">Hello World</button>

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Conditions and set Template to All, or narrow it to the pages that need the script. Under Script location tick Footer, set Footer Mode to Javascript, paste the code into the footer editor and publish.

Scripts Organizer prints header and footer code on the front end only with the Conditions trigger, not with Everywhere, and it adds the <script> tag itself, so paste the code without one.

How it works

One click listener on the document handles every .dpc-toggle-text element, including elements added to the page later.
The first time, the script remembers the original text in data-dpc-original. Each click swaps between that text and data-dpc-toggle-text (or OTHER_TEXT).
Elements that are not a <button> get role="button" and tabindex="0", and Enter or Space toggles them, so keyboard and screen reader users can use them too. A real <button> handles that itself.
The older version was a jQuery plugin with the texts hard-coded in the call.

Customise it

Other texts: change OTHER_TEXT, or set data-dpc-toggle-text per element.
Toggle content as well: in toggle(), add document.getElementById(el.getAttribute('aria-controls')).hidden = !swapped; and give the element aria-controls with the ID of the content. For a ready-made version see Toggle between two elements.

Gotchas

The script replaces the text, so bold, links or icons inside the element are lost after the first click. Put the class on the element that contains only the text.
Do not put the class on a Buttons block wrapper or a link: replacing its text would remove the link inside.

In the Scripts Organizer library Import it with one click from Scripts Organizer.