Div Toggle not Working

[fantasma]

Hi there!

I have this function in jQuery that is suposed to toggle a div, according to each different record I click, in order to toggle an upload form. However I can't seem to get it to work properly.

Anyone could help? I really need this working today :(

jQuery Script

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


$('div.upimagem').click(function() {    
    $(this).parents().next('div.contentor_upload').toggle("slow"); 
    return false;  
});
});

The records coming from the DB and the DIV that needs toggling

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>

// WHEN YOU CLICK THIS LINK "upimagem" THE DIV TOGGLES
			<a href="#"><div class="upimagem"></div></a>

		</div>';

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

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

	<div class="view">
		<form name="edita_records" method="POST" action="../crud/insert.php?mod=<?php echo $table ?>">
			<textarea class="area_titulo_view" name="titulo_emp" readonly="readonly">';
			
			echo $titulo;
			
			echo'</textarea>
			<textarea class="area_visualiza" name="content_emp" readonly="readonly">';
			echo $descricao;
			echo '</textarea>
			
		
	</form>
</div>



</div>


/* THIS IS THE DIV THAT SHOULD BE TOGGLED */

<div class="contentor_upload">
		<div class="upload">
			<form name="upload_imagem" method="post" enctype="multipart/form-data"  action="../upload/upload.php?id_int='.$id.'&mod='.$table.'">
			<input type="file" name="image">
			<input name="submit" type="submit" value="Upload">
			</form>
		</div>
	</div>';
}
echo '</div>';

Glad for all the help possible

[SolidSolutions]

any chance you can send a link?

[fantasma]

Sorry mate, ATM I'm working on Localhost... any questions I might answer?

[SolidSolutions]

I don't understand how upimagem div can ever be clicked. There is no content in the div so how would it ever "show" on the page to be clicked?

<a href="#"><div class="upimagem"></div></a>

[fantasma]

The div is basicaly a styled link, not intended to have content, just a css sprited image

[SolidSolutions]

well, I think you might be overdoing the jquery to show the upload div.

Can you change line 8 from:

$(this).parents().next('div.contentor_upload').toggle("slow");

to

$('div.contentor_upload').toggle("slow");

[fantasma]

Sorry mate, that was my first try, but, with that script, if I click the link for just one record, it will apear the div for all the records coming from the DB.

Basically, what I want is that, when I click in link "upimagem", it shows up a litlle box having an upload form for that specific record. However with that solution, every time I click the button, all the boxes for each record pop out.

Thanks for your effort SolidSolutions

[SolidSolutions]

ah, that was hard for me to understand through the code. I work much better from seeing the page.

But, I'll take another look at the code then and see what I can do...maybe someone else will see the fix though before I can get to it.

[SolidSolutions]

ok, so you have a unique ID for each form?
Use that for each upimagem div and contentor_upload div:

<a href="#"><div class="upimagem" onclick="showLoad($id);"></div></a>
<div class="contentor_upload" id="upload$id">

function showLoad(whichDiv) {
  showThis = "upload" + whichDiv;
  $(showThis).toggle("slow");
}

something to that affect anyway. Hopefully you get the idea.

[SolidSolutions]

oh, and this function:

function showLoad(whichDiv) {
  showThis = "upload" + whichDiv;
  $(showThis).toggle("slow");
}

replaces your click function:

$('div.upimagem').click(function() {    
    $(this).parents().next('div.contentor_upload').toggle("slow"); 
    return false;  
});

[fantasma]

You're the Man!!!! :P

Wasn't really working the way you posted because it was lacking the # before "upload", but after that, it's working perfectly!

So the function would rather be

function showLoad(whichDiv) {
showThis = "#upload" + whichDiv;
$(showThis).toggle("slow");
}

Thanks so much for you help!