vários Show/Hide com jQuery

Boa tarde. Estou desenvolvendo uma página com uma quantidade dinâmica de shows/hide com jQuery. Basicamente, o usuário clica em um estado do mapa do Brasil e, via Ajax, é carregado pra ele uma lista de vagas de estágio pro estado que ele selecionou.

Porém, por ser uma lista relativamente grande, nesta página não deve ser exibida todas as informações da vaga, apenas as relevantes, mas tendo um botão logo abaixo da 'mini informação' para que seja mostrado/ocultado o resto das informações da vaga.

O problema é que não estou conseguindo fazer essa função funcionar por nada. Como não entendo muito de jQuery, tentei fazer com o que achei pela internet, mas simplesmente não funciona. Eis o que tenho aqui:

O HTML:

<form name="vaga_<? echo $i; ?>" method="post" action="estagios/?page=vaga_cadastra">
<fieldset style="border-color:#21BBFE"><legend align="center">Vaga de nível <b><?=utf8_encode($r->nivel)?></b></legend>
<table width="95%" border="0" align="center" id="hor-minimalist-b">
<tr>
<td align="right" class="titulo" width="25%">Nº da vaga:</td>
 <td width="75%" align="left"><?=$r->id_vaga?></td>
</tr>
<tr>
<td align="right" class="titulo">Ensino:</td>
 <td align="left"><?=utf8_encode($r->nivel)?></td>
</tr>
<? if($r->id_nivel != 1){ ?>
<tr>
<td align="right" class="titulo">Curso(s):</td>
 <td align="left"><?=utf8_encode($curso)?></td>
</tr>
<? } ?>

<div class="parte1" id="<?=$r->id_vaga?>">
<tr>
<td align="right" class="titulo">Requisito:</td>
 <td align="left"><? echo $periodo; ?></td>
</tr>
<tr>
<td align="right" class="titulo">Horário de estágio:</td>
 <td align="left"><? echo utf8_encode($r->horario); ?></td>
</tr>
<tr>
<td align="right" class="titulo">Carga horária:</td>
 <td align="left"><? echo utf8_encode($r->carga_horaria); ?> horas diárias</td>
</tr>
<tr>
<td align="right" class="titulo">Atividades a serem desenvolvidas:</td>
 <td align="left"><? echo utf8_encode($r->atividades); ?></td>
</tr>
<tr>
<td align="right" class="titulo">Local do estágio:</td>
 <td align="left"><? echo utf8_encode($r->cidade)." - ".$r->sgl_estado; ?></td>
</tr>
</div>

<tr>
<td align="right" class="titulo">Valor da bolsa:</td>
 <td align="left">R$<?=$r->valor?></td>
</tr>

<div class="parte2" id="<?=$r->id_vaga?>">
<tr>
<td align="right" class="titulo">Preferência de sexo:</td>
 <td align="left"><? echo $psexo; ?></td>
</tr>
<tr>
<td align="right" class="titulo">Preferência de cidade:</td>
 <td align="left"><? echo $cidade; ?></td>
</tr>
<tr>
<td align="right" class="titulo">Quantidade de vagas:</td>
 <td align="left"><? echo $r->qtd_vagas; ?></td>
</tr>
<tr>
<td align="right" class="titulo">Possuir habilitação:</td>
 <td align="left"><? echo(($r->comp_cnh) ? "Sim" : "Não"); ?></td>
</tr>
<tr>
<td align="right" class="titulo">Possuir experiência:</td>
 <td align="left"><? echo(($r->comp_exp) ? "Sim" : "Não"); ?></td>
</tr>
<tr>
<td align="right" class="titulo">Informações adicionais:</td>
 <td align="left"><? echo (($r->info_add) ? utf8_encode($r->info_add) : "--"); ?></td>
</tr>
</div>
<tr>
<td align="left"><div class="box" id="<?=$r->id_vaga?>"><img src="../../images/icones/show_hide.png" border="0" /></div></td>
</tr>
</table>
</fieldset>
</form>

Por ser algo dinâmico, coloquei cada div recebendo o id daquela vaga, para que sejam diferenciadas. Reparem também que, ao clicar na img dentro da div com class box abaixo, é quando deveria dar um show/hide nas divs parte1 e parte2 (tá dividido em 2 partes pq um pedaço da informação tem que aparecer antes do valor da bolsa e o outro pedaço depois; a 'mini informação só trará o nº da vaga, ensino, curso e valor da bolsa.

...e a "tentativa" do jQuery (observe que estou usando cookies também, mas isso é irrelevante, porém este código foi o único que achei pela net que, ao meu ver, possibilitaria o uso de divs dinâmicas.

// Quando carregar a página

$(function($) {

 // Quando clicado em uma imagem das caixas
 $('div.box img').click(function() {
 // Recuperando ID da DIV da qual a imagem se encontra
 var id = $(this).parent('div').attr('id');
 // Armazenando elemento que será oculto
 var conteudo = $('#'+id+' parte1');
	// Escondendo ou exibindo o conteúdo do box
 conteudo.slideToggle(function() {
 // Caso o conteúdo do box esteja visível
 if (conteudo.css('display') == 'block')
 // Cria um cookie que recebe o ID do elemento como nome e o valor 1
 $.cookie(id, 1, {expires: 365});
 // Caso esteja oculto
 else
 // Cria um cookie que recebe o ID do elemento como nome e o valor 0
 $.cookie(id, 0, {expires: 365});
 });
 });
});

// Procurando e passando por cada box da página

$("body").find("div.box").each(function(){
 // Recuperando ID
 var id = $(this).attr('id');
 // Armazenando elemento que será oculto
 var conteudo1 = $('#'+id+' parte1');
var conteudo2 = $('#'+id+' parte2');
 // Caso o cookie não tenha sido criado
 if ($.cookie(id) == null){
 // Ocultamos
 conteudo1.css("display", "none");
	conteudo2.css("display", "none");
 // Se um cookie foi criado e está com 1, ou seja, visível

}else if ($.cookie(id) == 1){
// Exibimos

 conteudo1.css("display", "block");
	conteudo2.css("display", "block");
 // Se um cookie foi criado e está com 0, ou seja, oculto

}else if ($.cookie(id) == 0){
// Ocultamos

 conteudo1.css("display", "none");
	conteudo2.css("display", "none");
}
});

Mas não funciona. As informações não aparecem escondidas, e o botão não funciona.

Alguma luz de como resolver este problema?

[]'s

Glauber

Alguém??