Menue ein/ausklappen

**hhcm** · 05.06.2005, 17:02

Hi,

kommt drauf an.
PHP ist eine Serverseitige sprache. Du müsstest deine Seite per Formular senden, dann ist das machbar.

Einfach nur klicken und da erscheint oder verschwindet irgendwas is Javascript

ODER mit css...

<style type="text/css">
a span { display: none; }
a:focus span, a:active span { display: block; }
</style>

<a href="#">Ueberschrift
<span>Artikelbeschreibung etc.</span>
</a>

**Vogel** · 05.06.2005, 17:13

Und wie dann mit Javascript?
Leide nicht mein fachgebiet, hab auch schon versucht zu googlen konnte aber nx brauchbares finden.... wüde mich freuen, wenn wer bsp. hat.

grüße

**hhcm** · 05.06.2005, 17:23

So oder so ähnlich

<head>
<script language = "javascript">
function _switch(object) {
if(document.all.article.style.display == "none"){
document.all.article.style.display = '';
}
else{
document.all.article.style.display = "none";
}
}
</script>
</head>

<a href = "#" onClick = "_switch('article');">Ueberschrift</a><br />

<div style = "display:none;" name = "article">
<table>
<tr>
<td>Artikelfoto</td>
<td>Artikelbeschreibung</td>
</tr>
</table>
</div>

**Rumo** · 05.06.2005, 18:09

in der funktion selber muss aber object statt article stehen

**Vogel** · 05.06.2005, 18:44

PHP-Code:


<head>

<script language = "javascript">

function _switch(object) {

if(document.all.article.style.display == "none"){

document.all.article.style.display = '';

}

else{

document.all.article.style.display = "none";

}

}

</script>

</head>

<body>



<a href = "index_test.php" onClick = "_switch('object');">Ueberschrift</a><br />



<div style = "display:none;" name = "article">

<table>

<tr>

<td>Artikelfoto</td>

<td>Artikelbeschreibung</td>

</tr>

</table>

</div>

</body>

Ich verstehe ansatzweise die Funktion
(wenn article sind dislay=none soll '' werden...)
nur will irgendwie nicht so, wie ich will...
Als link der Überschrifft muss ich doch den index eingeben...? (also die seite auf der das script läuft...?)

Und wo kommt jetzt object hin?

**Rumo** · 05.06.2005, 19:02

1. machs mal so: (getestet mit IE6)

Code:

<html>
<head>
<title>JavaScript</title>
</head>
<body text="#00C0FF" bgcolor="#00007F" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<script language="javascript">
function _switch(object) {
if(document.getElementById(object).style.visibility == "hidden"){
document.getElementById(object).style.visibility = "visible";
}
else{
document.getElementById(object).style.visibility = "hidden";
}
}
</script>
</head>
<body>
<a href = "test.html" onClick = "_switch('article'); return false;">Ueberschrift</a><br />
<div style="visibility:hidden;" id="article">
<table>
<tr>
<td>Artikelfoto</td>
<td>Artikelbeschreibung</td>
</tr>
</table>
</div>
</body>
</html>

2.

OffTopic:
Ich kenn mich nich mit CSS aus, was spricht denn gegen visibility und für display?

**penizillin** · 05.06.2005, 19:04

Rumo: wird u.a. mit alten netscapes nicht laufen.

OffTopic:
"... beyound ..."

**Vogel** · 05.06.2005, 19:09

Danke, der testlauf hat funktioneiert, mache das jetzt mal mit meiner Tabele fertig, sollte was nicht funzen, melde ich mich geren wieder

Original geschrieben von Rumo

2.

OffTopic:
Ich kenn mich nich mit CSS aus, was spricht denn gegen visibility und für display?

[/B]

Ich glaube zu wissen das "display:none;" nich einwandfrei mit Opera oder Firefox (einer von den beiden) funktioniert. da wird das "verteckte" trotzdem angezeigt....

Grüße

P.S.: ... beyond .....

**Vogel** · 05.06.2005, 19:43

Danke nochmal funzt alles

Sorry für Doppelpost aber eine Frage bleibt noch,
undzwar, wie bekomme ich neben der Überschrift Icons hin die je nach menuestellung wechseln....?

Grüße

**Vogel** · 05.06.2005, 20:10

Mhh.... (ich hätte ja meinen alten Beitrag gelöscht, kann aber nicht

)

Funktioniert ja alles ganz gut, aber wenn ich dadrunter jetzt eine weitere Überschrift setze, passt sie sich nicht den situationen an....
d.h. Wenn überschrifft 1 eingeklappt ist, schiebt sich Überschrift 2 nich nach oben sondern das feld bleibt weiß...
Liegt ja daran, das der Teil ja nur versteckt wird.....
Was muss ich also machen, wenn die Überschriften aufrücken sollen !?

PHP-Code:


<div class="tborder">

 <table border="0" width="100%" cellspacing="1" cellpadding="5">

     <tr>

       <td colspan="4" class="catbg2" height="18"><a href = "#" onClick = "_switch('lightning'); return false;">Lightning</a></td>

     </tr><table border="0" width="100%" cellspacing="1" cellpadding="5" style="visibility:hidden;" id="lightning">

       <tr class="windowbg2">

       <td class="windowbg" width="6%" align="center" valign="top"><img src="XXX.gif" border="0" /></td>

       <td align="left"><a href="http://www.xxxxxxx/?site=" name="b30">GlowingFloppy Mod</a><br>Beschreibung</td>

       <td class="smalltext" valign="middle" width="22%">Gschrieben am xx.xx.xxxx von xxx</td>

        </tr>

       <tr class="windowbg2">

       <td class="windowbg" width="6%" align="center" valign="top"><img src="XXX.gif" border="0" /></td>

       <td align="left"><a href="http://www.technic3d.com/?site=" name="b30">GlowingMolex Mod</a><br>Beschreibung</td>

            <td class="smalltext" valign="middle" width="22%">Gschrieben am xx.xx.xxxx von xxx</td>

        </tr></table>

 </table>

</div>



<div class="tborder">

 <table border="0" width="100%" cellspacing="1" cellpadding="5">

     <tr>

       <td colspan="4" class="catbg2" height="18"><a href = "#" onClick = "_switch('software'); return false;">Software</a></td>

     </tr>

     <table border="0" width="100%" cellspacing="1" cellpadding="5" style="visibility:hidden;" id="software">

       <tr class="windowbg2">

       <td class="windowbg" width="6%" align="center" valign="top"><img src="XXX.gif" border="0" /></td>

       <td align="left"><a href="http://www.xxxxxxx/?site=" name="b30">WinOEM Mod</a><br>Beschreibung</td>

       <td class="smalltext" valign="middle" width="22%">Gschrieben am xx.xx.xxxx von xxx</td>

       </tr>

      </table>

 </table>

</div>

**Rumo** · 05.06.2005, 21:42

Jetzt kenn ich den Unterschied zwischen display und visibility:
Forme die Funktion so um:

Code:

<script language="javascript">
function _switch(object) {
     if(document.getElementById(object).style.display == "none")
        document.getElementById(object).style.display = "";
     else
        document.getElementById(object).style.display = "none";
}
</script>

(und eben die style eigenschaften entsprechend ändern)
dann müssts klappen!

**Vogel** · 05.06.2005, 21:49

Special Thx. Funzt so wie soll und es passt sogar

Nur so nebenbei, gibt es die möglichkeit mit den Icons ?
Is nicht wichtig, währe aber nicht schlecht mit....

Grüße

**Rumo** · 05.06.2005, 22:07

[Vorspiel: da keiner antwortet schreib ich einfach mal was, ohne zu verstehen was gemeint ist

]

mit was für icons?
also was meinst du damit?

**Vogel** · 05.06.2005, 22:23

Ich hatte in irgendeiner Antwort vorher, angefragt, ob man am Anfang der Überschrift Icons setzten kann, die sich ändern, wenn das Menue aufgeklapt ist (wie bei Windows mit [+] für aufklappen und [-] zuklappen)

Grüße

Menue ein/ausklappen