0

I have a site the generated a row of data from MySQL db. The parent element DIV is called "enclosure". This shows up as hidden when page loads. I have a link "show/hide" that I'm using to show the data when click using jQuery.

My problem:
Since all the rows for every record are in a div called 'enclosure' - the show/hide link when clicked only shows or hides the first record on the page, no matter what show/hide link I click.

<head>
<script>
      function ShowHide() {
      $('#enclosure').animate({"height": "toggle"}, {duration: 1000});
	}
</script>
</head>

<body>
<?php
$query  = "SELECT * FROM info ORDER by ticket DESC LIMIT 10";	
		$result = mysql_query($query);
	        while($row = mysql_fetch_array($result, MYSQL_ASSOC))
		{

        echo nl2br ("<a onclick=\"ShowHide(); return false;\" href=\"#\">Show/hide</a><div id=\"enclosure\" style=\"display:none\">{$row['ticket']}</div>" );
                }
?>
</body>

Edited by devinodaniel: n/a

2
Contributors
3
Replies
5
Views
6 Years
Discussion Span
Last Post by macneato
0

I tired something like this.. Which changes the name of the 'enclosure' DIV. But then jQuery can't dynamically change to append the id of the row.

Any suggestions?

echo nl2br ("<a onclick=\"ShowHide(); return false;\" href=\"#\">Show/hide</a><div id=\"enclosure{$row['id']}\" style=\"display:none\">{$row['ticket']}</div>" );
         }

Edited by devinodaniel: n/a

0

Its actually quite simple.

<a class="showHideDivs" href=\"#\">Show/hide</a><div id=\"enclosure\" style=\"display:none\">{$row['ticket']}</div>

Then trigger an event using live

$('a.showHideDivs').live('click', function() {
 $(this).next().animate({"height": "toggle"}, {duration: 1000});
});
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.