Toggle results from a database

Question

Hi,

I'm pretty new to jQuery, php and Databases, but i managed to create a database en retrieve data with php from that database.

After a searchterm is filled in, The data (retrieved from the database) will be displayed in the resultpage. For example: when searching for Netherlands you will get a couple of cities as a result. These cities all have extra info (population, spoken language, country etc.)

The cities are displayed but the extra info must be invisable untill the visitor clicks an underlined word or an image.

The problem:

This last part is the problem. It'seems to work with one invisible div, but when i click on the second result, the first result toggles again.

The data is retrieved with one query:

$result=$db->query("SELECT City, Country, Touristinfo, Tel, Fax, Times, Email, MATCH(CityName) AGAINST ('$searchterm' IN BOOLEAN MODE) AS relevance FROM city WHERE MATCH(CityName) AGAINST ('$searchterm' IN BOOLEAN MODE) ORDER BY city");

The data is displayed like this:

echo '

'.$row['City'].'

Click here for more info.

'.$row['Country'].' '.$row['Touristinfo'].' '.$row['Tel'].' '.$row['Fax'].' '.$row['Times'].' '.$row['Email'].'

        </div>

        <div class="small_box_right">
            <p></p>

        </div>';

The js code i'm using for the toggle is pretty simple (but not good enough for this case):

$(document).ready(function(){

$("u").click(function () {
  $('#moredetails').toggle();
});

});

Answer 1

You can't re-use element "id" values like that. The details for each row need their own "id".

If the underlined text is inside the row, then maybe you can give the details elements the class "details", and then have your "click" handler do something like this:

$("u").click(function(e) {
  $(this).closest("tr").find(".details").toggle();
});