Div dynamisch ein-/ausblenden per CSS

[KrisK]

<script type="text/javascript">
function einblenden(el) {
  el.parentNode.getElementById('versteckt').style.display = 'block';
}

function ausblenden(el) {
  el.parentNode.getElementById('versteckt').style.display = 'none';
}

</script>
<p>
»» ich möchte, dass beim Klicken auf das Wort "<span id="einblenden" onclick="einblenden(this);">weiterlesen</span>" sich ein weiterer Text öffnet, welcher zuvor nicht zu sehen ist. <div id="versteckt">Sofern der Leser sich entscheidet, die weitergehenden Informationen doch nicht lesen zu wollen, soll bei Klick auf das Wort "<span id="ausblenden" onclick="ausblenden(this);">zurück"</span> der zusätzliche Text wieder ausgeblendet werden.</div>
</p>

versuch mal:

<style>
.versteckt{display:none;}
</style>

<script>
function einblenden(el){
//alert(el.parentNode.childNodes.length);
el.parentNode.childNodes[el.parentNode.childNodes.length-2].style.display="block";
}
function ausblenden(el){
el.parentNode.style.display="none";
}
</script>

<div>
text<br />
<a href="#" onclick="einblenden(this);">weiterlesen</a>
<br />
<div class="versteckt">
versteckter text<br />
<a href="#" onclick="ausblenden(this);">zurück</a>
</div>
</div>

die node-nummerierung schließt schließende container und zeilenumbrüche glaube ich mit ein, deshalb die -2...
aber funktioniert erstmal