vários Show/Hide com jQuery

[Glauber Néspoli 0]

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??

[William Bruno 1501]

alguns exemplos:

http://forum.imasters.com.br/index.php?/topic/393854-display-block-ao-dar-check-no-radio-button/page__view__findpost__p__1537727

 

http://code.imasters.com.br/index.php?/topic/133-ocultarexibir-elementos-apartir-de-acao-em-radioselect/

 

http://forum.imasters.com.br/index.php?/topic/409710-menu-accordion-aberto-apos-link/

 

-> você linkou a lib jQuery ?

-> pq $('body') não está dentro do document.ready ?

[Glauber Néspoli 0]

Boa tarde William, sim eu linkei a lib jQuery, e na real seus links não me ajudaram muito..

A quantidade de div é aleatório, pode ser 0 e pode ser 100, depende de quantas vagas estiverem cadastradas praquele estado em específico, logo eu preciso é de uma forma de identificar as divs dinamicamente (atribuindo o id da vaga à div, como eu fiz), mas que o código jQuery consiga pegar esse valor dinâmico e ocultar/esconder DUAS divs, a parte1 e parte2. Enfim, é isso que preciso fazer, mas não estou conseguindo.

[William Bruno 1501]

seu código está muito confuso cara.

 

posta uma imagem.. e assim, você tá trabalhando com jQuery não precisa dos IDs, só vão te fazer perder tempo e dar mais trabalho.

 

'pra mim', a solução está nos links que passei, mas se você tá com dificuldade, posta uma imagem de como isso é pra eu entender onde você está 'disparando', que eu monto aqui pra você.

 

a imagem estando dentro da DIV, como você vai esconder a DIV, a imagem se esconderá junto.

mas onde você faz a 'div abrir' ?

[Glauber Néspoli 0]

Valeu pela ajuda William. Não sei se realmente vai precisar dos IDs (ouvi falar de uma função chamada each() no jQuery, estou tentando implementar algo com ela aqui), porém precisa ser dinâmico.

 

Mas a exibição seria algo assim:

 

Uma lista de vagas (while no php, trazendo a informação do banco):

 

Observe que há uma imagem provisória que estava utilizando enquanto testava, é clicando nela que exibiria o resto das informações, mas o que queria mesmo era algo do tipo "Mostrar mais informações" ou "Ocultar informações", dependendo se tivesse ocultado ou não a informação. Ae clicando ficaria assim:

 

 

E eis o motivo de que precisa de duas divs, pois um pedaço da informação vai aparecer antes e outro pedaço depois do valor da bolsa (que sempre será mostrado).

 

[]'s

 

Glauber

 

 

 

EDIT: Tentei utilizar um código que achei na internet, que funciona tanto pra button quanto pra link (não sei se é permitido postar links de fora, por isso não postarei), e tentei adaptá-lo para mim.

 

A primeira parte é pra button e a segunda pra link.Tá assim:

 

<script language="text/javascript">
$(document).ready(function(){
$('.parte1').hide();
$('.parte2').hide();
//Função Toggle executa as funções na ordem dos cliques,
//pode ter quantas quiser, prático, porque você
//usa só um botão para mostrar e ocultar, funciona com links também
$(".bt_exibir").toggle(
//1ª Função, pega valor do "name" exibe a div e muda o texto do botão
function() {
var_n=$(this).attr("name")
$("#bt_"+var_n).attr('value', 'Esconder informações da vaga n° '+var_n);
$("#parte1_"+var_n).show('slow');
$("#parte2_"+var_n).show('slow');},
//Segunda função esconde a div e volta o texto normal do botão
function() {
var_n=$(this).attr("name")
$("#bt_"+var_n).attr('value', 'Exibir informações da vaga n° '+var_n);
$("#parte1_"+var_n).hide('slow');
$("#parte2_"+var_n).hide('slow');}
); //Fim (".bt_exibir").toggle

//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//Togle no link acho que link não aceita ID,
//usei title para guardar o atributo
$(".bt_link").toggle(
function() {
var_x=$(this).attr("title")
$(this).html("Esconder informações da vaga n° "+var_x);
$("#parte1_"+var_n).show('slow');
$("#parte2_"+var_n).show('slow');},
function() {
var_x=$(this).attr("title")
$(this).html("Exibir informações da vaga n° "+var_x);
$("#parte1_"+var_n).hide('slow');
$("#parte2_"+var_n).hide('slow');}
); //Fim (".bt_link").toggle
}); //Fim de tudo do jquery
</script>

 

No meu HTML as divs tinham:

<div class="parte1" id="parte1_<?=$r->id_vaga?>">
//informação que será shown/hidden
</div>

<div class="parte2" id="parte2_<?=$r->id_vaga?>">
//informação que será shown/hidden
</div>

 

 

E o button / link (testei separadamente):

//button
<input name="<?=$r->id_vaga?>" id="bt_<?=$r->id_vaga?>" type="button" value="Exibir informações da vaga n° <?=$r->id_vaga?>" class="bt_exibir" />

//link
<a href="#" title="<?=$r->id_vaga?>" target="_self" class="bt_link">Exibir informações da vaga n° <?=$r->id_vaga?></a>

 

Mas ainda assim, nenhum dos dois funcionou. Onde está o erro?

 

 

 

 

EDIT2: Tentei de outra forma também, ao invéz de utilizar um parte1 e parte2, utilizar os 2 com o mesmo nome (conteudo), logo eles teriam o mesmo ID, só não sei se isso faria funcionar para os 2, mas ainda assim, sem sucesso.

[William Bruno 1501]

dá uma olhada:

 

 

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.mais_info').hide();//começando com todas as infos escondidas


$('.mais').click(function( e ){
	e.preventDefault();

	var mais_info = $( this ).next('.mais_info');

	if( !$( this ).next('.mais_info').is(':visible') )
	{
		$( mais_info ).show('slow');

		$('.mais_info').hide();//escondendo as demais, efeito de accordion
		$('.mais').html('mais informações');

		$( this ).html('ocultar informações');

	}
	else
	{
		$( mais_info ).hide('fast');
		$( this ).html('mais informações');
	}
});
});
</script>
</head>
<body>
<div class="box">
	Vaga de nível <strong>Superior</strong>
	<ul>
		<li><strong>n° da vaga</strong> 1007</li>
		<li><strong>Ensino </strong> Superior</li>
	</ul>
	<a href="#" class="mais">mais informações</a>
	<div class="mais_info">
		<ul>
			<li><strong>Requisito</strong> Apartir do 5° semestre</li>
			<li><strong>Horário do Estágio</strong> Tarde</li>
		</ul>		
	</div><!-- /mais_info -->
</div><!-- /box -->

<div class="box">
	Vaga de nível <strong>Superior</strong>
	<ul>
		<li><strong>n° da vaga</strong> 1007</li>
		<li><strong>Ensino </strong> Superior</li>
	</ul>
	<a href="#" class="mais">mais informações</a>
	<div class="mais_info">
		<ul>
			<li><strong>Requisito</strong> Apartir do 5° semestre</li>
			<li><strong>Horário do Estágio</strong> Tarde</li>
			<li><strong>Local do estágio</strong> Serra - ES</li>
		</ul>		
	</div><!-- /mais_info -->
</div><!-- /box -->

<div class="box">
	Vaga de nível <strong>Superior</strong>
	<ul>
		<li><strong>n° da vaga</strong> 1007</li>
		<li><strong>Ensino </strong> Superior</li>
	</ul>
	<a href="#" class="mais">mais informações</a>
	<div class="mais_info">
		<ul>
			<li><strong>Requisito</strong> Apartir do 5° semestre</li>
			<li><strong>Horário do Estágio</strong> Tarde</li>
		</ul>		
	</div><!-- /mais_info -->
</div><!-- /box -->

</body>
</html>

[Glauber Néspoli 0]

Consegui parcialmente!!

 

Dá uma olhada William, é exatamente isso aqui que quero:

 

http://www.superestagios.com.br/teste/teste6.php

 

Só tem UM problema agora (pois a parte feita no jQuery já está 100%, é o que está no link acima mesmo).

 

A chamada desta página é feito via Ajax. Ou seja, o usuário entra em uma página (vagas.php) que será exibido um mapa do Brasil em flash. Esse mapa fica dentro da div vagas (é a única coisa que tem no html da página vagas). Já implementei por Ajax pra, assim que clicar em um estado, ele trazer uma outra página php e jogar nesta div vagas. Por algum motivo, o jQuery não quer funcionar desta forma. Já tentei deixar o código jQuery tanto na página vagas.php quanto na página chamada pelo ajax.

 

Se quiser posso botar o link da página aqui para que você veja.

 

[]'s

Glauber

[William Bruno 1501]

acho que você não viu, o código que postei em #6 tem uma funcionalidade a mais que o teu.

 

se abrir um, não fechar, e abrir outro, o meu fecha o antigo. ^_^

 

então cara: javascript carregado com ajax não funciona

como resolver ?

 

não sei ao certo :lol: (depende do contexto, e do q foi usado)

tem vários e vários tópicos de pessoas com este mesmo problema.

 

no teu caso está está fácil.. usar o .live() vai resolver.

[Glauber Néspoli 0]

É eu sei disso William, o que geralmente faço pra resolver esse problema do JS com Ajax é deixar todo o código JS que vou utilizar durante todas as chamadas Ajax na página pai, ou neste caso, no vagas.php, logo posso chamar diversas funções/páginas diferentes via ajax que o JS já vai estar lá setado e funcionando corretamente. Estranhamente neste caso em específico (utilizando jQuery) não está..

 

E eu reparei no esquema de fechar a o anterior, ficou legal! Mas pra este caso fica mais funcional não fechar, pois ele pode querer ver as informações de mais de uma vaga ao mesmo tempo.

 

E como funcionaria essa função live? Sou bem novato em jQuery, mas vou dar uma pesquisada amanhã quando chegar no serviço.

 

Valeu!

 

[]'s