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)

Salut

Je te conseille de passer par Javascript (moi je suis sur Jquery)
Voici un exemple

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

Merci de ta réponse JENCAL !
Je débute à peine l'apprentissage de JavaScript donc désolé de cette question mais y'a-t-il moyen d'inverser l'affichage ? (qu'il soit masqué au départ et puis visible, l'exemple ici est visible dès le départ)
J'ai essayé de bidouiller 2/3 trucs mais rien n'y fait