JQuery Show/Hide Divs Problem

[Coly010]

Well that worked fine. But now I have another problem which is somewhat related.

I have an image of an arrow, and its on a div created by an array. Here's my file, should be easy enough to understand what's going on in it.

$fr_sql = $db->query("SELECT * FROM friends WHERE (user1_id = '$userid') OR (user2_id = '$userid')");

while( $fr_ar = mysqli_fetch_array($fr_sql))
{

if( $fr_ar['user2_id'] == $userid )
{
	$fr_id = $fr_ar['user1_id'];
}
else if( $fr_ar['user1_id'] == $userid )
{
	$fr_id = $fr_ar['user2_id'];
}

$fd_sql = $db->query("SELECT * FROM users WHERE userid = '$fr_id'");
$fd_ar = mysqli_fetch_array($fd_sql);

$fdname = $fd_ar['display_name'];
$fdpic = $fd_ar['display_pic'];

$ru_sql = $db->query("SELECT * FROM recent_updates WHERE userid = '$fr_id' ORDER BY ru_id DESC LIMIT 5");
$ru_nr = mysqli_num_rows($ru_sql);
if( $ru_nr > 1 )
{
	echo "<div class='update'>
		<table width='100%'>
			<tr>
				<td width='30%'>
					" . $fdpic . "
				</td>
				<td width='50%'>
					" . $fdname . " has changed some of their details.
				</td>
				<td width='20%'>
					<img src='img/dropdown_arrow.png' class='dd_arrow' />
					<img src='img/up_arrow.png' class='up_arrow' />
				</td>
			</tr>
		</table>
	</div>
	<div class='dropdown_news'>";
	while( $ru_ar = mysqli_fetch_array($ru_sql))
	{

		$type = $ru_ar['type'];
		$time = $ru_ar['time'];
		$old_value = $ru_ar['old_value'];
		$new_value = $ru_ar['new_value'];
			if( $type == 1 )
			{
				echo "<div class='dropdown_news_item'>

					<table width='100%'>
						<tr>
							<td width='30%'>
								<center>
								" . $fdpic . "
								</center>
							</td>
							<td width='50%'>
								" . $old_value . " has changed their display name to: <b>" . $new_value . "</b>
							</td>
							<td width='20%'>
								" . $time . "
							</td>
						</tr>
					</table>

				</div>";
			}

			else if( $type == 2 )
			{
				echo "<div class='dropdown_news_item'>

					<table width='100%'>
						<tr>
							<td width='30%'>
								<center>
								" . $fdpic . "
								</center>
							</td>
							<td width='50%'>
								" . $fdname . " has changed their status from: <b>" . $old_value . "</b> to: <b>" . $new_value . "</b>
							</td>
							<td width='20%'>
								" . $time . "
							</td>
						</tr>
					</table>

				</div>";
			}
			else if( $type == 3 )
			{
				echo "<div class='dropdown_news_item'>

					<table width='100%'>
						<tr>
							<td width='30%'>
								<center>
								" . $fdpic . "
								</center>
							</td>
							<td width='50%'>
								" . $fdname . "<br />
								" . $new_value . "
							</td>
							<td width='20%'>
								" . $time . "
							</td>
						</tr>
					</table>

				</div>";
			}
			else if( $type == 4 )
			{
				echo "<div class='dropdown_news_item'>

					<table width='100%'>
						<tr>
							<td width='30%'>
								<center>
								" . $new_value . "
								</center>
							</td>
							<td width='50%'>
								" . $fdname . " had changed their display picture.
							</td>
							<td width='20%'>
								" . $time . "
							</td>
						</tr>
					</table>

				</div>";
			}

	}
	echo "</div>";

 

Now i want it that when you click the arrow it will slideDown() the dropdown_news div relative to the div where the arrow is clicked. as you can probably see its possible for more than one arrow to be on the screen, and in that sense i cant use an id i need a class, and there can also be more than one div with the class dropdown_news.

When i click the arrow, obviously, all the divs with the class dropdown_news slideDown().

here is my jquery:

// Drop down arrow

$(".dropdown_news").hide();
$(".up_arrow").hide();

$(".dd_arrow").hover(function()
{
	this.src = 'img/dropdown_arrow_over.png';
}, function()
{
	this.src = 'img/dropdown_arrow.png';
});

$(".dd_arrow").click(function()
{
	$(".dropdown_news").slideDown();
	$(this).hide();
	$(".up_arrow").show();
});

// Up arrow

$(".up_arrow").hover(function()
{
	this.src = 'img/up_arrow_over.png';
}, function()
{
	this.src = 'img/up_arrow.png';
});

$(".up_arrow").click(function()
{
	$(".dropdown_news").slideUp();
	$(this).hide();
	$(".dd_arrow").show();
});

 

I don't know how to tackle this problem :/ any help would be appreciated.

[Coly010]

Has no-one got a solution?

[Coly010]

Doesn't Matter I got it. Used the .parent() method