Alterar de Javascript para Jquery

Galera,

Criei esta função em javascript porem queria fazer algo melhor em jquery, alguem poderia me ajudar de por onde começar ?

A função ela esconde as linhas de uma tabela e ao clicar nas tds ele aparece uma linha com uma descrição sempre uma por vez.

Basicamente é um hidden/view

<script language="JavaScript" type="text/javascript">
function participante(id) {
	var tds = document.getElementsByTagName('tr');
	for (var i=0; i<tds.length; i++){
 var link = tds[i];
 var rel = link.getAttribute('id');
 if ((rel.substring(0, 14)) && (rel.substring(0, 14)) == 'tdParticipante'){
 if (document.getElementById("tdParticipante"+rel.substring(14, 16)).style.display == ''){
 document.getElementById("cabParticipante"+rel.substring(14, 16)).className = 'participante p'+ rel.substring(14, 16) +' cursor';
 }
 link.style.display = 'none';
 }

 if ((rel.substring(0, 14)) && (rel.substring(0, 14)) == 'ddParticipante'){
 if (document.getElementById("tdParticipante"+rel.substring(14, 16)).style.display == ''){
 document.getElementById("cabParticipante"+rel.substring(14, 16)).className = 'participante p'+ rel.substring(14, 16) +' cursor';
 }
 link.style.display = 'none';
 }
	}

 document.getElementById("cabParticipante"+id).className = 'participante p'+id+' cursor selected';

	if(document.getElementById("tdParticipante"+id).style.display=="none"){
 document.getElementById("tdParticipante"+id).style.display="";
 }
 else {
 document.getElementById("tdParticipante"+id).style.display="none";
 }

	if(document.getElementById("ddParticipante"+id).style.display=="none"){
 document.getElementById("ddParticipante"+id).style.display="";
 }
 else {
 document.getElementById("ddParticipante"+id).style.display="none";
 }
}
</script>

Obrigado galera!!!!