Auf- und Zuklappen

Hi,
PitPossum hat gesagt.:
Was ich allerdings nicht hinkriege ist, dass beim Klick auf ein Menü eine Grafik (z.B. "+" oder "-") abhängig vom Zustand des Menüs angezeigt wird.
Klappt man sozusagen ein Menü auf, steht statt "+" ein "-". Klappt man es zu, wir der "-" zum "+".
Zum Vergrößern anklicken....

das wären die notwendigen Ergänzungen für eine "grafische" Umsetzung:

Code: 
<html>
<head>
<title>Auswahlmenü</title>
<base target="anzeige">
<script type="text/javascript">
<!--
function show(divid) {
d=document;

var bild = 'bild' + divid;

if (d.getElementById(divid).style.display == 'block')
   {
      d.getElementById(divid).style.display='none';
      d.getElementById(bild).src = "plus.gif";
   }
   else
   {
    d.getElementById('cat1').style.display='none';
    d.getElementById('cat2').style.display='none';
    d.getElementById('cat3').style.display='none';
    d.getElementById('cat4').style.display='none';

    d.getElementById(divid).style.display='block';
    d.getElementById(bild).src = "minus.gif";
   }
}
//-->
</script>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" link="#800000" alink="#000000" bgcolor="#FFFFFF" vlink="#800000">
<a onclick="show('cat1')"><img src="plus.gif" id="bildcat1"><b>Bands:</b></a><br>
<div id="cat1" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Band "EarlGrey"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Band "Braumoasda"</a><br>
</div>
<a onclick="show('cat2')"><img src="plus.gif" id="bildcat2"><b>DJs:</b></a><br>
<div id="cat2" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">DJ Scream</a><br>
</div>
<a onclick="show('cat3')"><img src="plus.gif" id="bildcat3"><b>Communities:</b></a><br>
<div id="cat3" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Nightfeaverteam</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">PsyLaz</a><br>
</div>
<a onclick="show('cat4')"><img src="plus.gif" id="bildcat4"><b>Andere:</b></a><br>
<div id="cat4" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Musikfestival "JULA"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Rus. Club "Bravo"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">DAB-Service</a><br>
</div>

</body>
</html>
 
Maik hat gesagt.:
Hi,


das wären die notwendigen Ergänzungen für eine "grafische" Umsetzung:

Code: 
<html>
<head>
<title>Auswahlmenü</title>
<base target="anzeige">
<script type="text/javascript">
<!--
function show(divid) {
d=document;

var bild = 'bild' + divid;

if (d.getElementById(divid).style.display == 'block')
   {
      d.getElementById(divid).style.display='none';
      d.getElementById(bild).src = "plus.gif";
   }
   else
   {
    d.getElementById('cat1').style.display='none';
    d.getElementById('cat2').style.display='none';
    d.getElementById('cat3').style.display='none';
    d.getElementById('cat4').style.display='none';

    d.getElementById(divid).style.display='block';
    d.getElementById(bild).src = "minus.gif";
   }
}
//-->
</script>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" link="#800000" alink="#000000" bgcolor="#FFFFFF" vlink="#800000">
<a onclick="show('cat1')"><img src="plus.gif" id="bildcat1"><b>Bands:</b></a><br>
<div id="cat1" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Band "EarlGrey"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Band "Braumoasda"</a><br>
</div>
<a onclick="show('cat2')"><img src="plus.gif" id="bildcat2"><b>DJs:</b></a><br>
<div id="cat2" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">DJ Scream</a><br>
</div>
<a onclick="show('cat3')"><img src="plus.gif" id="bildcat3"><b>Communities:</b></a><br>
<div id="cat3" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Nightfeaverteam</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">PsyLaz</a><br>
</div>
<a onclick="show('cat4')"><img src="plus.gif" id="bildcat4"><b>Andere:</b></a><br>
<div id="cat4" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Musikfestival "JULA"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Rus. Club "Bravo"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">DAB-Service</a><br>
</div>

</body>
</html>
Zum Vergrößern anklicken....

Vielen Dank für die schnelle Hilfestellung. Das hat prima funktioniert!
Diese Lösung bringt allerdings eine weitere Frage mit sich. :(

Wie kann ich es gewährleisten, das ausschliesslich das aufgeklappte Menü ein "-" hat.
Versuch bitte 2 oder 3 menüs nacheinander aufzuklappen ohne sie wieder zu schliessen um diesen Nebeneffekt zu sehen.
 
Zuletzt bearbeitet:
Hi,

Du könntest beide Scripts kombinieren. Maiks graphische Lösung und mein "Speichern" des alten Objektes.
Code: 
var objSave = null;

function show(divid) {
  d=document;

  var bild = 'bild' + divid;

  if(objSave != null)
    objSave.src = "../bilder/plus.gif";

  if(d.getElementById(divid).style.display == 'block'){
    d.getElementById(divid).style.display='none';
  }else{
    d.getElementById('cat1').style.display='none';
    d.getElementById('cat2').style.display='none';
    d.getElementById('cat3').style.display='none';
    d.getElementById('cat4').style.display='none';

    d.getElementById(divid).style.display='block';
    d.getElementById(bild).src = "../bilder/minus.gif";
    objSave = d.getElementById(bild);
  }
}
Ciao
Quaese
 
Quaese, vielen Dank.
Das hat sofort geklappt!

Jetzt ist es genau wie es sein sollte. Nochmals Vielen Dank!

Wenn es euch nichts ausmacht hätte noch eine Frage, und zwar:
wie mache ich es, dass der Zustand des Menüs nach dem aufklappen gespeichert wird, und ein menü nur dann wieder geschlossen wird, wenn man erneut drauf klickt.

Im Endeffekt will ich, dass man nach Wunsch mehrere untermenüs gleichzeitig ansehen kann.
 
Zuletzt bearbeitet:
Code: 
function show(divid){
 d=document;

 var bild = 'bild' + divid;

 if(d.getElementById(divid).style.display == 'block'){
  d.getElementById(divid).style.display = 'none';
  d.getElementById(bild).src = 'plus.gif';
 }else{
  d.getElementById(divid).style.display = 'block';
  d.getElementById(bild).src = 'minus.gif';
 }

}
 
Maik hat gesagt.:
Code: 
function show(divid){
 d=document;

 var bild = 'bild' + divid;

 if(d.getElementById(divid).style.display == 'block'){
  d.getElementById(divid).style.display = 'none';
  d.getElementById(bild).src = 'plus.gif';
 }else{
  d.getElementById(divid).style.display = 'block';
  d.getElementById(bild).src = 'minus.gif';
 }

}
Zum Vergrößern anklicken....

Nochmals Danke euch beiden, jetzt funktioniert es perfekt.
Bei Interesse könnt Ihr das Endergebnis auf meiner homepage auf der linken Seite unter der Rubrik "Unsere Freunde" nachsehen.
 
Jetzt muss ich natürlich übertreiben.
Wenn ihr dazu keine Zeit/Lust habt, kann ich das verstehen.

Meine Frage wäre wie folgt:
Wie kann mann nun diesen Script so erweitern, dass er:
- Die Anzahl der Elemente in einer Kategorie als Zahl (x) ausgibt.

Dem, der sich damit beschäftigen möchte danke ich im Voraus (!)
 
Zuletzt bearbeitet:
Also... Weiter helfen kann ich dir da leider nicht...
Hab dazu selber ne Frage ^^
Kann man das nich auch nen bissl verallgemeinern, sodass der Effekt sich da auswirkt, wo ich ihn halt aufrufe!?
Und muss ich das unbedingt mit nem Link machen oder kann ich z.B. nen <button> nehmen, der nen Menü auf und zuklappt?

Das "speichern" des Zustandes vom Menü müsste man auch in der Session speichern können... Zumindestens bei mir, weil ich das eine Menü nur eingeloggten Usern zeige, die dadurch auch ne Session haben ^^
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück