JQuery - Toggle Funtkion

phzu

Hallo!

Ich arbeite gerade an einer kleine Homepage wo ich meine Entwicklungen vorstellen kann. Dazu sind für den Inhalt Tabellen vorgesehen. Bei einem Klick auf die erste Zeile der Tabelle sollen alle anderen Zeilen DIESER Tabelle angezeigt werden. Beim nächsten Klick wieder ausgeblendet.

Das Ganze ist kein Problem solange ich nur eine Tabelle habe. Sobald aber zwei Tabellen vorhanden sind, bei denen die ersten Zeilen mit den selben CSS-ID's markiert sind, werden natürlich alle Informationen zu allen Produkten eingeblendet.

Hier ist mein bisheriger Code:
HTML:

HTML

<html>
 <head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="jquery.js"></script> 
  <script>
   $(document).ready(function(){ 
    $("tr#name").click(function(){
     $("tr#detail").toggle(); 
    }); 
   });
  </script>
 </head>
 <body>
  <table border="0">
   <tr id="name"><td><a href="#">Produktname</a></td></tr>
   <tr id="detail"><td>Details 1</td></tr>
   <tr id="detail"><td>Details 2</td></tr>
  </table>
  <table border="0">
   <tr id="name"><td><a href="#">Produktname</a></td></tr>
   <tr id="detail"><td>Details 1</td></tr>
   <tr id="detail"><td>Details 2</td></tr>
  </table>
 </body>
</html>

Alles anzeigen

CSS:

Code

body{}
tr#name{
 background-color: #CCCCCC;
}
tr#detail{
 background-color: #DDDDDD;
}
a{
 display: block;
}

Nun ja, das ist natürlich nicht der fertige Code, aber zum Testen sollte das genügen.

Wäre sehr glücklich wenn jemand einen Tipp hätte!

mfg phzu

Unregistriert

Auf einer Seite darf eine ID nur einmal verwendet werden

SinnlosS

Zitat von Unregistriert

Auf einer Seite darf eine ID nur einmal verwendet werden

Genau das. Wenn du etwas mehrmals brauchst nimmst class. ID muss eindeutig sein.
Das was du möchtest kannst du dann z.B. so machen (ungetestet):

HTML

<html>    <head>        <title>Test</title>        <link rel="stylesheet" type="text/css" href="style.css">        <script type="text/javascript" src="jquery.js"></script><script>        $(function(){            $("tr.name").click(function(){                thisTable = $(this).parents("table");                thisTable.find("td.detail").toggle();            });        });        </script>    </head>    <body>        <table border="0">            <tr class="name"><td><a href="#">Produktname</a></td></tr>            <tr class="detail"><td>Details 1</td></tr>            <tr class="detail"><td>Details 2</td></tr>        </table>        <table border="0">            <tr class="name"><td><a href="#">Produktname</a></td></tr>            <tr class="detail"><td>Details 1</td></tr>            <tr class="detail"><td>Details 2</td></tr>        </table> </body></html>

Edit: Musst dir wohl rauskopieren zum Lesen, Editor spinnt und streicht alle Zeilenumbrüche aus dem Code, ka wieso.

phzu

Danke für die schnellen Antworten!

ID zu verwenden war natürlich Blödsinn.

SinnlosS
Der Code ist gut, kleiner Fehler ist aber drinnen.

td.detail >>> tr.detail

Dann funktionierts.

Vielen Dank!

mfg Phzu

SinnlosS

Np. War halt wie gesagt ohne testen nur eben hingetippt.
Was mir grad noch auffällt:
So wie dein Code im Eingangsteil steht würden da Listen statt Tabellen wesentlich mehr Sinn machen.

phzu

Die Homepage wird in HTML5 und CSS3 programmiert. (mit sämtlichen Workarounds...:x) Bin gerade dabei mir es ein wenig anzueignen, das auch der Grund warum ich solche Sachen vermehrt mit JQuery probiere. Ist einfach schön zu programmieren ohne Flash herumzugurken! Ich weiß schon IE - wie ich ihn hasse!

Zurück zu deiner Anregung:

Die Tabellen stehen später natürlich nicht mehr so da wie jetzt, die werden noch in die entsprechenden <section>'s gegeben. Dann dürften die Tabellen wieder mehr Sinn ergeben.

Oder was meinst du mit Eingangsbereich? Navigation wird schon noch vor den Tabellen positioniert.

mfg

SinnlosS

Im Eröffnungspost meinte ich.
Es geht nicht darum wo das eingefügt wird, sondern welche Informationen enthalten sind. Wenn da nicht noch mehr Spalten dazukommen brauchst du eben keine Tabelle nehmen, dann sind es ja keine tabellarischen Daten sondern eine Liste.

phzu

Achso meinst du das Ja dann wär das sicher ne Überlegung, allerdings ist es schon möglich dass die detailierten Daten dann mehrere Spalten haben.

Mal sehn.
Auf jeden Fall vielen Dank für die Hilfe!

Tags