JavaScript Öffnen / schliessen per onclick

[hemorieder]

Hey,

ich habe folgendes bis jetzt:

<table>
<tr style="cursor:pointer;" onclick="document.getElementById('abc').style.display='table-row'; ">
    <td style="background-color:#d7e7fd;">&nbsp;</td>
    <td style="padding-left:20px">Wurst</td>
    <td>Fleisch</td>
    <td>200g</td>
    <td>2 Euro</td>
    <td>2010</td>
    <td>Fertig</td>
  </tr>
  <tr style="display:none" id="abc">
   <td width="1%" style="background-color:red;">&nbsp;</td>
   <td  width="99%"  colspan="6" style="background-color:#000;" ><img style="padding-left:220px" src="bilder/bild.png" /></td>
  </tr>
</table>

Das hat zur folge, das beim öffnen der Seite das Bild versteckt wird, und sobald ich klicke, dass Bild zu sehen ist. Wie gewünscht

Nur wie erreiche ich es, dass wenn man wieder klickt, sich das bild wieder schliesst ?

Bzw, wenn ich ein neues Element anklicke sich das alte Bild schliesst, und das neue öffnet, so dass immer nur ein Bild zu sehen ist ?!

Ist das verständlich, und habt ihr ne idee ?

lg

 

[schnupp]

für solche sachen empfiehlt sich immer der einsatz eines frameworks. z.b. jQuery.

dann wäre das beispiel schlicht so:

onclick="$('#abc').toggle();"

 

[S.o.T.]

<script>
function tablething() {
var testtable = document.getElementById("testtable");
if(testtable) {
if(testtable.className == "hidden") {
testtable.className = "visible";
} else {
testtable.className = "hidden";
}
}
}

window.onload = function() {
var testtable = document.getElementById("testtable");
if(testtable) {
testtable.onclick = tablething;
}
};
</script>

<table id="testtable">
<tr style="cursor:pointer;">
    <td style="background-color:#d7e7fd;">&nbsp;</td>
    <td style="padding-left:20px">Wurst</td>
    <td>Fleisch</td>
    <td>200g</td>
    <td>2 Euro</td>
    <td>2010</td>
    <td>Fertig</td>
  </tr>
  <tr style="display:none" id="abc">
   <td width="1%" style="background-color:red;">&nbsp;</td>
   <td  width="99%"  colspan="6" style="background-color:#000;" ><img style="padding-left:220px" src="bilder/bild.png" /></td>
  </tr>
</table>

Hab' mir keine Mühe gegeben, weil ich denke, dass du keine perfekte Programmierung brauchst, weil dein Code nicht gerade optimal ist.

 

[hemorieder]

@schnupp
nice one, dankeschön ! das klappt ja cool !
nur das wenn ich bild 1 öffne, und dann auf bild 2 klicke, sehe ich beide, wie erreiche ich es, dass alle anderen bilder geschlossen werden ?

 

[schnupp]

dann sollten alle die gleiche klasse zugewiesen bekommen.

onclick="$('.die_gemeinsame_klasse').hide(); $('#abc').toggle();"

wenn dir das gefällt, dann einfach mal mit jQuery auseinandersetzen. ganz viele
kleine - und auch große - probleme lassen sich damit sehr einfach lösen. man
muss das rad nicht jedesmal neu erfinden.

 

[hemorieder]

hammer ! ist ja echt fett !

Wenn du mir vll nur noch verraten kannst, wie ich es jetzt noch cool nach unten/bzw oben sliden lasse, dann raste ich aus

 

[cR@zY.EnGi.GeR]

Also erstens solltest du Div Container verwenden und zweitens würde ich das Anzeigen bzw. Verstecken nicht mit JavaScript sondern mit CSS (hover) realisieren, so funktioniert das Ganze auch dann, wenn JavaScript deaktiviert ist.
Das ersetzt allerdings nicht onclick, nur onmouseover und onmouseout.

 

[hemorieder]

öh ok, es klappt nur so halb, damit schliesst sich zwar das andere bild, aber wenn ich auf das eigentlich bild wieder klicke, schliesst sich das bild nicht mehr !
nur wenn ich wieder auf ein anderes klicke schliesst es sich

 

[cR@zY.EnGi.GeR]

Ach ja, wenn du es mit JavaScript realisierst, solltest du aus Suchmaschinensicht und falls JavaScript deaktiviert sein sollte, das, was du beim Laden der Seite verstecken willst, zuerst anzeigen und dann per onload mit Javascript verstecken, nicht mit CSS.

man muss das rad nicht jedesmal neu erfinden.

Zu spät, hab mein eigenes JavaScript-Framework geschrieben.

 

[NullPointer]

hammer ! ist ja echt fett !

Wenn du mir vll nur noch verraten kannst, wie ich es jetzt noch cool nach unten/bzw oben sliden lasse, dann raste ich aus

slideDown() könnte das sein, was du suchst

 

[hemorieder]

ah nice, aber wie ist das mit dem problem von oben ?

öh ok, es klappt nur so halb, damit schliesst sich zwar das andere bild, aber wenn ich auf das eigentlich bild wieder klicke, schliesst sich das bild nicht mehr !
nur wenn ich wieder auf ein anderes klicke schliesst es sich

 

[NullPointer]

Nimm mal das "toggle()" weg. Sonst bekommt das angeklickte Bild erst das hide(), dann sofort das toggle() - und schon ist es wieder sichtbar.

 

[hemorieder]

wenn ich das

$('.archive-table').hide();$('#abc').toggle();

in

$('.archive-table').hide();

ändere, woher weiss es dann, dass es abc öffnen soll ?

 

[hemorieder]

keine idee ?

Ergänzung (14. September 2010)

ok, anders, von mir aus können die anderen fenster aufbleiben, nur will ich nun einen slideeffekt haben,

.slideToggle()

gibt es ja, aber wenn ich das in meine tabelle (s.o) einbaue, dann zerschießt es die ganze tabelle ?

wisst ihr wieso ?

 

[Mister Blue Sky]

Hi Hemorieder :-) - weiß nicht, ob Du noch was damit anfangen kannst [bezieht sich auf den ersten Beitrag]
- die drei Punkte [siehe Zitat]

[1.] Das hat zur folge, das beim öffnen der Seite das Bild versteckt wird, und sobald ich klicke, dass Bild zu sehen ist. Wie gewünscht

[2.] Nur wie erreiche ich es, dass wenn man wieder klickt, sich das Bild wieder schließt ?

[3.] B.z.w, wenn ich ein neues Element anklicke sich das alte Bild schließt, und das neue öffnet, so dass immer nur ein Bild zu sehen ist ?! ...

erfüllt das nachfolgende Beispiel [in etwa] - 3 Dateien [selbes Verzeichnis]:

1. test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" media="all" type="text/css" href="style.css" />

</head><body><div id="pics">

<span class="toggle">Wurst</span><div class="hide"><img 
src="http://www.bilder-hochladen.net/files/f11h-4.png" alt="x01"/><p>Bild und Text 
zur Wurst</p></div>

<span class="toggle">200g</span><div class="hide"><img 
src="http://www.bilder-hochladen.net/files/f11h-5.png" alt="x02"/><p>Bild und Text 
zu 200g</p></div>

<span class="toggle">2 Euro</span><div class="hide"><img 
src="http://www.bilder-hochladen.net/files/f11h-6.png" alt="x03"/><p>Bild und Text 
zu 2 Euro</p></div>

<span class="toggle">2010</span><div class="hide"><img 
src="http://www.bilder-hochladen.net/files/f11h-7.png " alt="x04"/><p>Bild und Text 
zu 2010</p></div>

<span class="toggle02" onclick="javascript:location.reload()">Fertig</span>

</div></body></html>

2. script.js

onload = function() 

{
var e, i = 0;
while (e = document.getElementById('pics').getElementsByTagName ('span') [i++]) {
if (e.className == 'toggle') {
e.onclick = function () {
var getEls = document.getElementById('pics').getElementsByTagName('div');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
w=getEls[z].previousSibling;
while (w.nodeType!=1)

{
w=w.previousSibling;
}
w.className=w.className.replace('toggle over', 'toggle');
w.className=w.className.replace('toggle off', 'toggle over');
}

this.className = this.className == 'toggle' ? 'toggle off' : 'toggle';
x=this.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling;
}
x.className = this.className == 'toggle off' ? 'show' : 'hide';
}
}
}
}

3. style.css

body            {font:13.4px verdana, sans-serif;}
#pics           {position:relative; width:550px; padding:3px;}
              
.toggle, .toggle02  {display:block; color:#444; background:#e7e5e1; cursor:pointer; 
border-style:solid; border-color:grey; float:left; margin:0px; padding:2px 0 2px 0; 
text-align:center;}

.toggle         {border-width:1px 0px 1px 1px; width:99px; }
.toggle02       {border-width:1px 1px 1px 1px; width:100px; }

.off,           {background:#eee; color:#000;}
.hide           {display:none;}
.show           {position:absolute; top:28px; left:0px; display:block;}
.show img       {position:absolute; top:0px; left:3px; border:1px solid grey;}
p               {position:absolute; top:265px; left:36px; white-space:nowrap;}

Ps. Warum Dir ".slideToggle()" das table-layout zerstört - keine Idee - vielleicht findest Du hier Infos/Codebausteine [Prototype] die Dir nützen können:

Erweiterte Effekte - Combination Effects + script.aculo.us downloaden und installieren

PPs. Zumindest geht der Thread weiter

GF