Member Avatar for devinodaniel

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 because: n/a
  • 2 Contributors
  • 3 Replies
  • 203 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by macneato

Recommended Answers

All 3 Replies

Member Avatar for devinodaniel

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 because: n/a
Member Avatar for macneato

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});
});
Member Avatar for macneato

Nb... Should probably use your second piece of code, as every id should be unique.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.