JavaScript: Unterscheidliche div's ein- und ausblenden

[Sinane]

Hiho,

bisher habe ich versteckte div's z.B. in einer versteckten Meldung folgendermaßen ein- und ausgeblendet:

 function showmessage()
    {
        document.getElementById('hiddenmessage').style.visibility = 'visible';
    }
 
 function hidemessage()
    {
        document.getElementById('hiddenmessage').style.visibility = 'hidden';
    }

<div id="hiddenmessage">
irgendwas
<a href="#" onclick="hidemessag()">Hide</>
</div>

<a href="#" onclick="showmessage()">Show</a>

Was aber kann ich tun, wenn ich z.B. 5 Bilder habe, die jeweils ein anderes div öffnen sollen, muss ich dann jedem Link 'ne andere ID geben und meinen JS-Code 5x schreiben oder geht das einfacher?


GRUß Sinane

 

[cebito]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Wenn du die ID's durchnumerierst kannst du es bspw. so machen.

 function showmessage(i){        
document.getElementById('message' + i).style.visibility = 'visible';
 }

<div id="message1"></div>
<a href="#" onclick="showmessage(1);">show1</a>

<div id="message2"></div>
 <a href="#" onclick="showmessage(2);">show2</a>
 
 <div id="message3"></div>
  <a href="#" onclick="showmessage(3);">show3</a>

 

[derkk_koenig]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Hiho,

bisher habe ich versteckte div's z.B. in einer versteckten Meldung folgendermaßen ein- und ausgeblendet:

 function showmessage()
    {
        document.getElementById('hiddenmessage').style.visibility = 'visible';
    }
 
 function hidemessage()
    {
        document.getElementById('hiddenmessage').style.visibility = 'hidden';
    }

<div id="hiddenmessage">
irgendwas
<a href="#" onclick="hidemessag()">Hide</>
</div>

<a href="#" onclick="showmessage()">Show</a>

Was aber kann ich tun, wenn ich z.B. 5 Bilder habe, die jeweils ein anderes div öffnen sollen, muss ich dann jedem Link 'ne andere ID geben und meinen JS-Code 5x schreiben oder geht das einfacher?


GRUß Sinane

Gib jedem link ne andere ID eines divs mit : showmessage('div1') oder ('div2')
und dann in der
function showmessage(element){
document.getElementById(element).style.visibilty= 'visible'
}

wenn du dann auch noch allen divs ne klasse mit gibst, kannst du die anderen 4 unsichtbat machen, wenn du das VOR dem visible aufrufst.

VG

der kk_koenig

 

[Sinane]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Ok, vielen Dank, das klappt schonmal super, kann man es auch arrangieren, dass, wenn bereits ein div geöffnet ist, dieses beim Öffnen eines anderen geschlossen wird?

Edit: Benutze den Vorschlag von cebito.

 

[cebito]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Beispielsweise so

function showmessage(i) {
   for (var x=1; x<=3; x++){
      if(x==i){
      document.getElementById('message' + x).style.visibility = 'visible';
      } else {
      document.getElementById('message' + x).style.visibility = 'hidden';
      }
   }
}

wobei bei x<=3 "3" für die Anzahl deiner divs steht. Das Ganze ließe sich auch natürlich noch virl komfortabler und variabler mit nem Framework bspw. jQuery lösen. Aber wenn du nicht viel mehr JavaScripts benutzt, ist es auch so ok.

Eine zweite Möglichkeit wäre, sich die ID des jeweils geöffneten divs zu merken und dann nur den zu schließen.

 

[Sinane]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Okay, eingebaut, funktioniert. Jetzt hab ich nur noch ein Problem: Jedes div öffnet sich eine Zeile tiefer als das Vorherige. Kann man das umgehen?

 

[derkk_koenig]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Okay, eingebaut, funktioniert. Jetzt hab ich nur noch ein Problem: Jedes div öffnet sich eine Zeile tiefer als das Vorherige. Kann man das umgehen?

ersetze visibility:hidden durch disply: none
vsibility versteckt das element, reserviert aber weiterhin den platz dafür.
display: none gibt den reservierten platz frei

@cebito: guter vorschlag, jedoch etwas unflexibel beim wie auch immer gearter änderung der element-anzahl. am besten wäre es hier die anztahl der elemente auszulesen und die als var anstelle der 3 einzubauen. und da wären wir wieder bei jQUery...

vg

der kk_koenig

 

[Duddle]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Du willst offenbar einen Akkordion-Effekt. Dieser ist in den mir bekannten JS-Effekt-Bibliotheken immer implementiert, u.a. auch in jQuery UI.

Manchmal ist es zwar gut, zum Lernen so etwas selbst zu schreiben, im Allgemeinen aber sollte zu den durchdachten, getesteten und auf Performance optimierten Bibliotheken gegriffen werden.


Duddle

 

[cebito]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

@cebito: guter vorschlag, jedoch etwas unflexibel

Ich weiß, deshalb auch meine Anmerkung.

 

[Sinane]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Okay, auf den Unterschied von display und visibility hätt ich auch selber kommen müssen *grummel* danke dir

Aber was jQuery angeht: Ich arbeite noch nicht lange mit JavaScript, ich hab, wie man so schön sagt, keinen Plan, wie ich das verwenden sollte

 

[derkk_koenig]

AW: JavaScript: Unterscheidliche div's ein- und ausblenden

Okay, auf den Unterschied von display und visibility hätt ich auch selber kommen müssen *grummel* danke dir

Aber was jQuery angeht: Ich arbeite noch nicht lange mit JavaScript, ich hab, wie man so schön sagt, keinen Plan, wie ich das verwenden sollte

gerne... dafür sind wir ja da.

jquery: api.jquery.com ist ne sehr gute hife. für die erweiterung ui ui.jquery.com .. da sind auch ne menge beispiele was man so machen kann, ohne das rad neu zu erfinden.

nur gaaaanz kurz: in jquery kannst du z.b. direkt css-klassen oder ids oder tag ansprechen, alle mit dem gleichen 'befehl':
$('#meine_Id') oder $('.meine_klasse') oder $('div, p') für tags.
und dann einfach per punkt die gewünschte action ausführen:

$('.alleimeinedivs').hide();
$('#div2').show();

das wäre dann der ganze code für deine show.function ;O)
aber: du musst halt die lib einbinden, was wieder mehr KB bedeutet.. wenn du also nicht mehr machst als die 5 divs ein und auszublenden ist das 'teuer' erkauft

vg

der kk_koenig