1 Replies - 335 Views - Last Post: 25 February 2012 - 04:24 PM Rate Topic: -----

#1 parthmody90  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 24-January 12

jquery problem

Posted 25 February 2012 - 03:28 PM

Im printing out an unordered list dynamically...heres the code which does it
<?php 
include_once "connect_to_mysql.php";


$name = $_POST['name'];

$todo = $_POST['todo'];
 $sql = mysql_query("INSERT INTO todo (todo,name) 
     VALUES('$todo','$name')")  
     or die (mysql_error());
	 $sql2 = mysql_query("SELECT DISTINCT name FROM todo");
$todofeed .= '<div class="title"> <ul>';     	 
while($row = mysql_fetch_array($sql2))
{
	$name1 = $row["name"];
	$todofeed.='
	
			<li>' . $name1 . '</li>
		
	
	';
	
	$sql3 = mysql_query("SELECT id, todo FROM todo WHERE name='$name1' ");
	while($row = mysql_fetch_array($sql3))
	{$todo1 = $row["todo"];

		$todofeed.='
	<div class="items">
	<ul>
		<li>' . $todo1 . '</li>
	</ul>	
	</div>
	';}
	
	
}
$todofeed .= '</div></ul>';     
print "$todofeed";

?>

im getting an output something like this:


Attached Image
What i want is to to be able to see only the items with filled bullets and then when i click on them i should see the rest via a jQuery effect...heres what i have tried so far with jQuery...which doesnt work...
<style type="text/css">
 div.title,div.items
{
text-align:center;
background-color:#999999;
font:large
}
div.items
{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  $(".title").click(function(){
    $(".items").slideDown("slow");
  });
});


Is This A Good Question/Topic? 0
  • +

Replies To: jquery problem

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4332
  • View blog
  • Posts: 12,127
  • Joined: 18-April 07

Re: jquery problem

Posted 25 February 2012 - 04:24 PM

Well you attached the event to the containing div named title. I think you want to be attaching the click to the <li> elements of the title div. After all, it is the list items you are clicking (the ones with the filled bullets) to trigger the open of the other items.

Also keep in mind that if a lot of different items boxes are given the class "items" that when you click on one title it is going to open up all subitems because the slideDown is going to match all the div elements, not just the one for that item.

I also noticed that you closed your titles div before closing the </ul>. You want to switch those around.

:)

Edit: Here is a fiddle to play with.... http://jsfiddle.net/jZcKa/

This post has been edited by Martyr2: 25 February 2012 - 04:38 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1