Met HTML en JavaScript heb ik onderstaand raamwerk voor een nieuwstoggle in mekaar gestoken. Bedoeling is dat klikken op een titel de inhoud toont en wanneer men op een andere titel klikt wordt de vorige inhoud weer verborgen en de nieuwe getoond. Hoe zou ik dit in Angular 17+ kunnen realiseren? Dank voor uw antwoord, Wim.
Code:
<script>
function maakLeeg() {
for (var i = 1; i < 4; i++) {
if (i < 10) {
var id1 = "00" + i;
} else if (i > 9 && i < 100) {
var id1 = "0" + i;
} else {
var id1 = i.toString;
}
var x = document.getElementById(id1);
x.style.display = "none";
}
}
function toon(id2) {
maakLeeg();
var y = document.getElementById(id2);
y.style.display = "block";
}
</script>
<body onload="maakLeeg()">
<button id="btn1" onclick="maakLeeg()">Verberg nieuws</button>
<article>
<h2 onclick="toon('001')">tralala</h2>
<div id="001">
<p>Wij zullen er zijn zenne!</p>
<img src="wimgoderis.jpg">
</div>
</article>
<article>
<h2 onclick="toon('002')">tralala</h2>
<p id="002">Wij zullen er zijn zenne!</p>
</article>
<article>
<h2 onclick="toon('003')">tralala</h2>
<p id="003">Wij zullen er zijn zenne!</p>
</article>
</body>
