# Aufklappbare News



## prey (11. September 2004)

Hi,

da ich nicht genau wusste ob es sich bei diesem Script um DHTML, JavaScript, PHP oder sonstiges handelt hab ich einach mal hier gepostet:

Und zwar möchte ich gerne wissen wie man denn so ein aufklappbares Newsscript, wie beispeilsweise auf der seite http://www.mymtw.de zu finden, bauen kann

Drückt man unten auf das "+", klappt sich der newseintrag weiter auf und weitere details folgen. wie code ich sowas ?


mfg
prey


----------



## aemkei (11. September 2004)

Möglich ist es mit Javascript.

Das ganze hättest du im mtw forum coding gefunden.

Ich poste das nun einfach mal hier.

Expand/Collapse Script
----------------------
Getestet mit: IE 6.0 und Mozilla FireFox 0.9.2
Sprache:      HTML/JavaScript

Es wird im folgenden eine JavaScript Funktion verwendet, um das dynamische
Ein- und Ausblenden des Contents zu ermöglichen. 
Mit document.getElementById(contentid).style.display erhalten wir den derzeitigen
Status des Elements, entweder ist dieser '' (angezeigt) oder 'none' (nicht angezeigt)
und können Ihn manipulieren. Gleichzeitig wird das Element des Icons ermittelt, auf
das geklickt wird, und das Bild ggf. durch ein Plus oder Minus ersetzt (die Bilder im
angehängten Script habe ich einfach ohne zu fragen hinterhältig von der mymtw
page geklaut).

-------------------[schnipp]--------------------
<script language="JavaScript">

function expandcollapse(contentid, buttonid)
{
     if (document.getElementById(contentid).style.display == 'none') <!-- Wenn momentan der Content ausgeblendet ist ... -->
     {
          document.getElementById(contentid).style.display = ''; <!-- ... den Content einblenden ... -->
          document.getElementById(buttonid).src = 'minus.gif'; <!-- ... und das das Collapse Symbol anzeigen. -->
     }
     else if(document.getElementById(contentid).style.display == '') <!-- Wenn der Content momentan eingeblendet ist ... -->
     {
          document.getElementById(contentid).style.display = 'none'; <!-- den Content ausblenden ... -->
          document.getElementById(buttonid).src = 'plus.gif'; <!-- ... und das Expand Symbol anzeigen. -->
     }
}

</script>

-------------------[schnapp]--------------------

Im HTML-Teil müssen den entsprechenden Elementen dann Id's verpasst werden,
damit sie eindeutig identifiziert werden können. So ist es möglich, mehrere
Ausklappelemente auf einer Seite darzustellen, sie müssen lediglich alle eine
unterschiedliche Id haben:

-------------------[schnipp]--------------------
<body>

Hier steht der normale Text.
<span onMouseUp="expandcollapse('content1', 'button1')" style="cursor: hand"><img src="plus.gif" id="button1"></span><br>
<span id="content1" style="display: none">und der Kram hier wird halt eingeblendet oder nicht! </span>

</body>
-------------------[schnapp]--------------------


----------



## prey (12. September 2004)

vielen dank für die ausführliche antwort !


----------



## prey (12. September 2004)

aah zu früh gefreut .. das script funktioniert 1a, allerdings möchte ich jetzt noch, dass ein menü auf meiner seite von vornherein geöffnet ist.

muss dem also sagen, dass 
document.getElementById(contentid).style.display == ''
ist. kenn mich mit der syntax von js aber null aus ;( 

die obere anweisung einfach mit in das script-tag einzufügen reicht leider nicht ;D

mfg prey


----------

