Forums

StoneGut

Hey - long time reader - first time poster :)

I have a simple little mySql result page that displays the results using "for" statement into each own display div. Within the div is an "approve" , "edit" , and "delete" button - the approve and delete work fine BUT I want the edit button to slideToggle the edit page corresponding to that div and mySQl result. I have it partially working - click on edit - and ALL the edit div's slide open.... almost there?

Anywho here is the Jquery code:

    <script type=\"text/javascript\">
	
		$(document).ready(function() {
			$(\".guestbook_result .edit_guestbook_link\").click(function(){
				$(\".edit_guestbook\").slideToggle();
			});
		});
	</script>

Here is the display div:

<div class=\"guestbook_result\" style=\"background-color:#f7f7f7; border:1px solid #c1c1c1; width:630px; margin-top:10px; float:left; padding:4px;\"  onMouseOver=\"this.style.backgroundColor='#f1f1f1';  this.style.borderColor='#579e18';\"  onMouseOut=\"this.style.backgroundColor='#f7f7f7';this.style.borderColor='#c1c1c1';\">

<font class=\"guestbook_name\"><?php echo $name; ?></font><font class=\"guestbook_location\"> from <?php echo $location; ?></font><br />
<div style=\"padding-left:15px;\"><font class=\"guestbook_comment\">\"<?php echo $comment; ?>\"</font></div>
                <div style=\"text-align:right;\"><font class=\"guestbook_date\"><?php echo $date; ?></font></div>
                
                <div style=\"border-top:1px dashed #CCC; text-align:left; padding-top:5px; margin-top:4px; width:630px;\">
                <font class=\"main_text\"><a href=\"admin_guestbook.php?action=approve&amp;id=<?php echo $id; ?>\">Approve</a> | <a href=\"#\" class=\"edit_guestbook_link\">Edit</a> | <a href=\"admin_guestbook.php?action=delete&amp;id=<?php echo $id; ?>\" onclick=\"return confirm('CONFIRM DELETION - THIS CAN NOT BE UN-DONE')\">Delete</a></font>
                </div>
                
                <div class=\"edit_guestbook\" style=\"background-color:#CCC; width:600px; display:none;\">
					<br /><br /><br /><br /><br />
				</div><!--GUESTBOOK EDIT-->


</div> <!--Entry container-->

Hopefully you get the idea I'm trying - excuse some of the inline styling - the section is in the development / testing / design stages.

Thanks in Advance!!!

StoneGut

Someone wonderful on the official jQuery forums figured it out:

$(document).ready(function() {

$(".guestbook_result .btn-edit").click(function(){
$(this).parents().children(".guestbook_edit").slideToggle("fast");

});
});

Me = Happy!

Robskiwarrior

"StoneGut" said:
Someone wonderful on the official jQuery forums figured it out:

$(document).ready(function() {

$(".guestbook_result .btn-edit").click(function(){
$(this).parents().children(".guestbook_edit").slideToggle("fast");

});
});

Me = Happy!

Ive just started learning today myself :) I even managed to build my first little site widget thing slider thing :)

treehouse : what would you like to learn today?

Forums

Some SIMPLE jQuery help....