Afficher/Masquer Div dans un tableau

Bonjour à tous, j'ai à peu près compris comment on affichait et/ou masquait une div mais là je suis en tableau et je bloque un peu, j'ai réussi à faire en sorte que les lignes du tableau que je veuille masquer soient masqués et lorsque je clique dessus elles s'affichent, mais j'aimerai bien qu'elles puissent se masquer à nouveau lorsque l'on clique dessus. (Avec un + qui devient un - et vice versa si possible)
Mon code actuel ressemble à peu près à ceci
HTML:

<table align="right">
  <tbody>
    <tr>
      <th colspan="2" class="ryuName"> Nom Prénom </th>
    </tr> 
    <tr>
      <td colspan="2"><img class="kiryuImg" img src="img/kiryu.jpg"> </td>
    </tr>
    <tr>
      <td onclick="$('.truc1').css('display', 'table-row')" colspan="2" class="tableauTitre"> Biographie </td>
    </tr>
    <tr class="truc1">
      <td> <b>Age</b> </td>
      <td> XX ans </td>
    </tr>
  
  </tr>
  <tr class="truc1">
  	<td><b>Date de naissance</b></td> <td>XX/XX19XX</td>
  	</tr>
  <tr class="truc1">
  	<td><b>Lieu de naissance</b></td> <td>XXX, XXXX</td>
  </tr></div>

CSS:

.truc1{
	display: none;
}

.truc2{
	display: none;
}

Merci d'avance pour votre aide !
Modifié par Tony_Lau (16 Jul 2019 - 16:19)