Funktionsweise: Ein Link auf ein Element mit der Klasse .fake-button sorgt dafür, dass das mit der href referenzierte Element (z. B. href="#meine-id")" mit der entsprechenden CSS ID (im Beispiel also ""#meine-id") nach einem Klick automatisch die Klasse "active" erhält.

Globaler Event Listener, mit dem z. B. Toggles getriggert werden können.js

/* Funktionsweise: Ein Link auf ein Element mit der Klasse .fake-button sorgt dafür, dass das mit der href referenzierte Element (z. B. href="#meine-id")" mit der entsprechenden CSS ID (im Beispiel also ""#meine-id") nach einem Klick automatisch die Klasse "active" erhält.

Theoretisch ist die Logik beispielsweise erweiterbar, indem man die Klasse über einen .close-Button wieder wegnimmt.

Anwendungsbeispiel:

1.) Button:

<div class="fake-button" href="#reveal-info" title="Anklicken, um mehr zu erfahren">Mehr Informationen</a>

2.) Referenziertes Element:

<div class="hidden" id="reveal-info">
<!-- My hidden content that should become visible ... -->
</div>
*/

document.addEventListener('click', function (event) {
	// console.log(event);
	if (event.target.matches('.fake-button')) {
		// Run your code to open a modal
		// console.log(event.target);
		const target = event.target.getAttribute('href');
		// console.log(target);
		const target_row = document.getElementById(target.replace("#", ""));
		target_row.classList.toggle('active');
		// console.log(mad);
	}
	/*
	if (event.target.matches('.close')) {
		// Run your code to close a modal
	} */
}, false);




// Super clean version:
document.addEventListener('click', function (event) {
	if (!event.target.matches('.fake-button')) return;
	const mad = document.querySelector(event.target.getAttribute('href'));
	mad.classList.toggle('active');
}, false);