Dynamicaly Show/Hide Div

[fantasma]

I there everyone.

I've been wondering if someone could help to glue up my broken head with this one.

I've got some "labels" which show up, dynamicaly, the data coming from mySql through PHP. In those labels I've got 4 buttons for uploading an image, deleting the respective entry, editing and view the entry with its respective ID.

However, i've trying with jQuery to add some "on the fly" features, in other words, for example, if I click in "view" button, it would only show that specific ID data without going to another page (that would be to easy :D), but by showing an hidden DIV with that content.

But it has some flaws, because, if I click that button, it shows all the divs to all the records which I don't want.

Here's the jQuery code:

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('div.contentor_visualiza').hide();
 // shows the slickbox on clicking the noted link  

 
 // toggles the slickbox on clicking the noted link  
  $('div.visualiza').click(function() {
    $('div.contentor_visualiza').toggle(200);
    return false;
  });
});

AND THE HTML CODE

<div class="contentor_records">


		<?php 

		
		$sentence = "SELECT ID,titulo,descricao,imagem FROM $table ";
		$query = mysql_query($sentence);
		if(!$query)
		{
			echo "Erro ao executar a query".mysql_error();
		}
		while ($row = mysql_fetch_array($query)){
		
		$titulo=$row['titulo'];
		$id=$row['ID'];
		$descricao = $row['descricao'];
		$imagem=$row['imagem'];
		
		echo'<div class="etiquetas">';

		echo '<div class="tit_etiq">';
		
		
				echo $titulo;


		echo'</div>';
		
		echo'<div class="botoes_comando">
			
			<a href="#"><div class="visualiza" id="visualiza"></div></a>
			<a href="view.php?id='.$id.'"><div class="edita"></div></a>
			<a href="../crud/delete.php?id='.$id.'&mod='.$table.'"><div class="elimina" id="delete"></div></a>
			<a href="../upload/upload_crop.php?id='.$id.'&mod='.$table.'"><div class="up_imagem"></div></a>
		</div>';

		echo'</div>
		<div class="contentor_visualiza" id="contentor_visualiza'.$id.'">

		<?php $table = "content_empresa";?>

	<div class="insert">
		<form name="edita_records" method="POST" action="../crud/insert.php?mod=<?php echo $table ?>">
			<textarea class="area_titulo_adic" name="titulo_emp">';
			
			echo $titulo;
			
			echo'</textarea>
			<textarea class="area_visualiza" name="content_emp">';
			echo $descricao;
			echo '</textarea>
			
		
			<div class="buttons">
				
				<input type="submit" name="inserir" class="positive" value="Guardar">
					<img src="../gfx/guardar.png" alt=""/> 
				</input>
				
			</div>
	</form>
</div>

</div>';

}
echo '</div>';

?>

</div>

Glad for all the help possible.

Cheers!

[AleMonteiro]

Hey, you need to specify wich div you want to show up. By the structure of your HTML I guess this should work:

$('div.visualiza').click(function() {    
    $(this).parent().parent().children('div.contentor_visualiza').toggle(200);    
    return false;  
});

Hope it helps

[fantasma]

I want to show up, in the case of clicking "View" this div "contentor_visualiza"

Unfortunately your solution didn't work. It does not even show any did...

Thanks for your effort anyway

[AleMonteiro]

Sorry, i forgot to one level, try this:

$('div.visualiza').click(function() {    
    $(this).parent().parent().parent().children('div.contentor_visualiza').toggle(200);    
    return false;  
});

[fantasma]

It seems to have no effect mate sorry

[AleMonteiro]

Can you post an resulting HTML?

[fantasma]

Sorry mate, what do you mean by "resulting HTML" ??

[AleMonteiro]

The HTML that your PHP page generates. Use the view source option in your browser.

[fantasma]

Here's the code

<div class="contentor_records">





		<div class="etiquetas"><div class="tit_etiq">			asdasdasdasd

			

			</div><div class="botoes_comando">

			

			<a href="#"><div class="visualiza" id="visualiza"></div></a>

			<a href="view.php?id=24"><div class="edita"></div></a>

			<a href="../crud/delete.php?id=24&mod=content_empresa"><div class="elimina" id="delete"></div></a>

			<a href="../upload/upload_crop.php?id=24&mod=content_empresa"><div class="up_imagem"></div></a>

		</div></div>

		<div class="contentor_visualiza" id="contentor_visualiza24">



		<?php $table = "content_empresa";?>



	<div class="insert">

		<form name="edita_records" method="POST" action="../crud/insert.php?mod=<?php echo $table ?>">

			<textarea class="area_titulo_adic" name="titulo_emp">			asdasdasdasd

			

			</textarea>

			<textarea class="area_visualiza" name="content_emp"><p>asdasdasdasdasdasdas</p>			

			</textarea>

			

		

			<div class="buttons">

				

				<input type="submit" name="inserir" class="positive" value="Guardar">

					<img src="../gfx/guardar.png" alt=""/> 

				</input>

				

			</div>

	</form>

</div>



</div><div class="etiquetas"><div class="tit_etiq">Introdução Empresa

			

</div><div class="botoes_comando">

			

			<a href="#"><div class="visualiza" id="visualiza"></div></a>

			<a href="view.php?id=11"><div class="edita"></div></a>

			<a href="../crud/delete.php?id=11&mod=content_empresa"><div class="elimina" id="delete"></div></a>

			<a href="../upload/upload_crop.php?id=11&mod=content_empresa"><div class="up_imagem"></div></a>

		</div></div>

		<div class="contentor_visualiza" id="contentor_visualiza11">



		<?php $table = "content_empresa";?>



	<div class="insert">

		<form name="edita_records" method="POST" action="../crud/insert.php?mod=<?php echo $table ?>">

			<textarea class="area_titulo_adic" name="titulo_emp">Introdução Empresa

			

</textarea>

			<textarea class="area_visualiza" name="content_emp">Somos uma empresa que se dedica à imagem no sentido lato da palavra, desenvolvendo projectos de design gráfico, interiores, industrial e multimédia.

<br><br>

A função da Artzende é materializar as ideias, apresentar soluções, filosofias de comunicação, espaços funcionais e estéticos, sistemas industriais eficientes, rentáveis e seguros.			

<br><br>

Temos como filosofia <i>"criado pelo homem, para pessoas"</i> e é neste sentido que trabalhamos em todos os nossos projectos.			</textarea>

			

		

			<div class="buttons">

				

				<input type="submit" name="inserir" class="positive" value="Guardar">

					<img src="../gfx/guardar.png" alt=""/> 

				</input>

				

			</div>

	</form>

</div>



</div></div>

</div>

[AleMonteiro]

Hey, there you go:

$(this).parents('div.etiquetas').next('div.contentor_visualiza').toggle(200);

This works, but i recommend you to change your HTML structure.

Actual: <etiquetas> <botoes_comando/> </etiquetas> <contentor_visualiza/>...

For what you wanna do, it should be: <etiquetas> <botoes_comando/> <contentor_visualiza/> </etiquetas>...

and then you use:

$(this).parents('div.etiquetas').children('div.contentor_visualiza').toggle(200);

[fantasma]

thank you it works! And thank you for your advice, will implement rigth away.

Added reputation.

Cheers mate ;)