Spoiler auf Tabellenzeile mit CSS-Selektor

Ich versuche, einen Tisch zu machen, die immer Unter Informationen ermöglicht, wenn eine Zeile geklickt wird, habe ich den folgenden Code, aber ich kann nicht die Unterinformation voneinanderSpoiler auf Tabellenzeile mit CSS-Selektor

erscheint separat machen

#spoiler, #close { 
 
    display: none; 
 
} 
 
#show:target #spoiler { 
 
    display: table-row; 
 
} 
 
#show:target #open { 
 
    display: none; 
 
} 
 
#show:target #close { 
 
    display: block; 
 
}

<div id="show"> 
 
    <table> 
 
    <tr> 
 
     <td> <a href="#show" id="open" class="trigger open">Company 1</a> 
 
      <a href="#hide" id="close" class="trigger close">Company 1</a></td> 
 
    </tr> 
 
    <tr> 
 
     <td id="spoiler" class="spoiler">Company 1 Information</td> 
 
    </tr> 
 
    <tr> 
 
     <td> <a href="#show" id="open" class="trigger open">Company 2</a> 
 
      <a href="#hide" id="close" class="trigger close">Company 2</a>   </td> 
 
    </tr> 
 
    <tr> 
 
     <td id="spoiler" class="spoiler">Company 2 Information</td> 
 
    </tr> 
 
</table> 
 
</div>

Quelle

2016-04-11 Racana

IDs können nur einmal verwendet werden, deshalb :) –

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
    function toggle_visibility(id){ 
     var e = document.getElementById(id); 
     if(e.style.display == 'none') 
      e.style.display = 'block'; 
     else 
      e.style.display = 'none'; 
    } 
    </script> 
</head> 
<div id="show"> 
    <table> 
    <tr> 
     <td> <a href="#" id="openOne" onclick="toggle_visibility('showOne');">Company 1</a> 
    </tr> 
    <tr> 
     <td id="showOne" style="display:none">Company 1 Information</td> 
    </tr> 
    <tr> 
     <td> <a href="#" id="openTwo" onclick="toggle_visibility('showTwo');">Company 2</a> 
    </tr> 
    <tr> 
     <td id="showTwo" style="display:none">Company 2 Information</td> 
    </tr> 
</table> 
</div> 
</html>

Besser und einfacher mit Javascript.

Quelle

2016-04-11 14:48:26

Sie verwenden dieselbe ID für mehr als ein Element. Sie sollten ihre IDs voneinander trennen, damit wird Ihr Problem behoben.

Quelle

2016-04-11 13:55:47

Können Sie mir ein kurzes Beispiel geben? Ich bin wirklich hier verloren – Racana

Gibt es ein Problem, Javascript zu verwenden? –

Nein, ich kenne JS nicht, aber ich möchte lernen – Racana

Spoiler auf Tabellenzeile mit CSS-Selektor

Antwort

Verwandte Themen