Reputation: 87
im making a todo list app in php and im using unordered lists to print them out.What I want is to display the titles of todo lists to be displayed first and their contents hidden initially but displayed later via the click event in jQuery.This is what i have tried so far...
<?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 .= ' <ul id = "nav">';
while($row = mysql_fetch_array($sql2))
{
$name1 = $row["name"];
$todofeed.='<li class="title"><a href="#">' . $name1 . '</a></li>';
$sql3 = mysql_query("SELECT id, todo FROM todo WHERE name='$name1' ");
while($row = mysql_fetch_array($sql3))
{$todo1 = $row["todo"];
$todofeed.='<ul>
<li id="items">' . $todo1 . '</li>
</ul>';}}
$todofeed .= '</ul>';
print "$todofeed";
?>
<style type="text/css">
li#items
{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#nav li#title').click(function() {
$('li#items').css('display' , 'visible');
});
});
</script>
any way to fix this?
Upvotes: 0
Views: 91
Reputation: 1524
I'd suggest to use "a" instead "li.title", to prevent default link click behaviour
$('#nav').on('click', 'li.title a', function(event) {
event.preventDefault();
$('#nav .items').hide();
})
http://jsfiddle.net/acrashik/JaPbV/1/
Upvotes: 0
Reputation: 12322
Your list element has a class name and not a ID, try
$('ul#nav li.title')
Upvotes: 2
Reputation: 9221
$('ul#nav li.title').click(function() {
because of your
$todofeed.='<li class="title"><a href="#">' . $name1 . '</a></li>';
Upvotes: 2