Javascript Trick “getElementByClass” – versteckter Content für Sumas direkt sichtbar
Stell dir einen Artikel vor. Darunter sind Fragen zum Artikel und zu jeder Frage gibt es viele Antworten. Nun möchte der Webmaster die Antworten erstmal ausblenden, damit der Besucher einfach durch die Fragen scannen kann. Mit Javascript kann sich der Besucher die Antworten zu den Fragen anzeigen lassen, die ihn interessieren. Das ist alles kein Problem, man kann ja mit
style="display: none";
alles schön ausblenden und dann mit
function anzeigen()
{
document.getElementById('elementid').style.display = 'block';
}
<a href="#" onclick="anzeigen()">anzeigen</a>
das benötigte wieder einblenden. Einen Haken hat die Sache allerdings, versteckte Bereiche (also alles was mittels CSS und mit “display: none” versteckt wird) kommen den Suchmaschinen “komisch” vor. Damit der Content in den versteckten Bereichen auch gewertet wird, sollte man eine andere Strategie wählen.
Erst alles anzeigen, dann verstecken
Als erstes werden alle Inhalte vollständig angezeigt. Danach nutzt man das “onload”-Ereignis im body Tag der Website um eine Funktion aufzurufen, die alle Inhalte versteckt, die der Besucher erstmal nicht sehen soll (wegen der Usability).
function start()
{
document.getElementById('elementid').style.display = 'none';
}
<body onload="start()">
Zusatz:
Javascript gibt uns als Entwicklern die Möglichkeit auf Elemente mittels den folgenden drei Strukturen zuzugreifen:
- getElementById
- getElementsByName
- getElementsByTagName
Was aber eigentlich immer fehlt ist eine Funktion im Sinne von: getElementsByClass. Im Digitalpoint Forum hab ich jetzt eine tolle Lösung gefunden:
function verstecke() {
var allElems = document.getElementsByTagName('*');
for (var i = 0; i < allElems.length; i++) {
var thisElem = allElems[i];
if (thisElem.className && thisElem.className == 'antworten') {
thisElem.style.display = 'none';
}
}
}
function anzeigen(elementid)
{
document.getElementById(elementid).style.display = 'block';
}
<body onload="verstecke()">
<a href="#" onclick="anzeigen('antworten_block_1')">anzeigen</a>
<ul class="antworten" id="antworten_block_1">
<li>Antwort 1</li>
<li>Antwort 2</li>
<li>Antwort 3</li>
</ul>
<a href="#" onclick="anzeigen('antworten_block_2')">anzeigen</a>
<ul class="antworten" id="antworten_block_2">
<li>Antwort 1</li>
<li>Antwort 2</li>
<li>Antwort 3</li>
</ul>
Sorry für die unleserliche Formatierung
