Slide Up/Down does not work properly

Question

Hi I want to display some search results using tables. In my code the basic details are displayed in a one table and if we want to see more details you have to click view more option. The hide details are also be displayed in a separate table.But I have a problem in my code. If I have more than one search result in my database the details regards to first person are displayed as I want. that means it I want to see more details i want to click on view more and it slide down the hide table. But the rest of search result displays the hidden tables as well. and also if i click the view more option of the rest, it again slide down the hidden table of very first person's table. here I have attached my code. Could you please help me to solve this issue?

<body>
<div class="container"> <!-- container -->
<div class="row" id="main-content">
<div class="span8">

<div class="well">    <!-- -start of well class -->
<?php

dbConnect();

$district = $_POST['district'];
$category = $_POST['catID'];
$subject  = $_POST['subID'];

//get the category name
$get_cat_name = mysql_query("SELECT catName FROM tutor_category WHERE catID='{$category}' ");
while($row = mysql_fetch_assoc($get_cat_name ))
{
    $cat_name = $row['catName'];
}

//get the subject name
$get_sub_name = mysql_query(" SELECT subName FROM tutor_subjects WHERE catID='{$category}' AND subID='{$subject}'");
while($row = mysql_fetch_assoc($get_sub_name ))
{
    $sub_name = $row['subName'];
}
?>


<!-- ****************** Heading Table *******************-->
<table class="table table-bordered">
            <tr>
                <th> <?php echo $district." District - ". $cat_name ." - ". $sub_name ?> </th>
        </tr>
</table>            
<!-- ****************** end of heading table *******************-->


<?php
//get tutor IDs
$get_tutor_id = mysql_query(" SELECT DISTINCT tutorID FROM tutor_register_subjects WHERE district='{$district}' AND catID='{$category}' AND subID='{$subject}' ");


while($row = mysql_fetch_assoc($get_tutor_id)) // first
{
    $tutor_id = $row['tutorID'];

$query = mysql_query(" SELECT * FROM tutor WHERE tutorID='{$tutor_id}' ");

while($row = mysql_fetch_assoc($query))
{ // second 

    $fname = $row['firstName'];
    $lname = $row['lastName'];
    $nic   = $row['nic'];
  $gender = $row['gender'];
    $education = $row['education'];
    $address = $row['address'];
    $profession= $row['profession'];
    $email = $row['email'];
    $cnum = $row['contactNum'];
  $avatar = $row['avatar'];

} // second
?>
<div class="control-group">
<!-- basic details -->
<table class="table table-bordered">    

  <tr>
    <td width="120" rowspan="4"><?php echo "<img src='uploads/".$avatar."' height='120' width='100'>"?></td>
    <th width="120">Name</th>
    <td><?php echo $fname." ". $lname?></td>
  </tr>
  <tr>
    <th>NIC</th>
    <td><?php echo $nic ?></td>
  </tr>
  <tr>
    <th>Gender</th>
    <td><?php echo $gender ?></td>
  </tr>
  <tr>
    <td colspan="2"><a class="more">View More</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="less">View Less</a></td>

  </tr>
</table>
</div>
<!-- end of basic details --> 

<!-- more details-->
<div class="control-group" id="more">
<table class="table table-bordered">

 <tr>
    <th>Contact Number</th>
    <td><?php echo $cnum ?></td>

  </tr>
  <tr>
    <th>Email</th>
    <td><?php echo $email ?></td>

  </tr>
  <tr>
    <th>Address</th>
    <td><?php echo $address ?></td>

  </tr>
  <tr>
    <th>Education</th>
    <td><?php echo $education ?></td>

  </tr>
  <tr>
    <th>Work Place</th>
    <td><?php echo $profession ?></td>

  </tr>
</table>
</div>
<!-- end of more details-->    

<legend></legend>

<?php 
} // first
?>

</div> <!-- -start of well class -->    
</div> <!-- end span12 class -->
</div> <!-- end of row class -->
</div> <!-- container -->

<!-- view more script-->
<script src="../js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#more").hide();
  $(".less").click(function(){
    $("#more").slideUp(1000);
  });
  $(".more").click(function(){
    $("#more").slideDown(1000);
  });
});
</script>

</body>

Then I want to add that you should not use mysql_query, use mysqli instead. (http://php.net/manual/en/book.mysqli.php). And you should NEVER EVER EVER get the id's with a query, and select the rest of the data with an infinite amount of other queries. Use this: `SELECT * FROM tutor_register WHERE district='{$district}' AND catID='{$category}' AND subID='{$subject}'`. Then you can drop the first while loop. Also, use PDO or MySQLI's binding methods instead of directly putting variables in queries, and last, but not least. Learn about MySQL joining tables (google for all this!) — AmazingDreams, Jul 24 '13 at 15:52

score 0 · Accepted Answer · answered Jul 24 '13 at 15:43

What's happening is that $("#more") selects every div with ID more, and changes it

Give each .less and .more something which is unique to the current user:

<div class="less" data-id="<?php echo $person_id; ?>">Show less</div>

<div class="more" data-id="<?php echo $person_id; ?>">Show more</div>

Then in your #more, where the actual data is, do something about the same

<div id="more-<?php echo $person_id; ?>">More information here</div>

Now in your jQuery, select the correct id:

$(".less").click(function(){
   $("#more-"+ $(this).attr('data-id')).slideUp(1000);
});
$(".more").click(function(){
    $("#more-"+ $(this).attr('data-id')).slideDown(1000);
});

What you are effictively doing now is telling jQuery to select div with e.g. id="more-15" in case you clicked on the .more with attribute data-id="15", thus selecting the correct div :)

Note: You don't have to use divs to be able to do this. This would also solve invalid HTML because you got tons of elements with the same id's

See: http://ejohn.org/blog/html-5-data-attributes/

Hi thanks for your support and advice. How I can hide more details when initially load the page — , Jul 24 '13 at 16:12
Simply use CSS to put a `display: none;` on them. jQuery will change that into `display: block;` later. — AmazingDreams, Jul 25 '13 at 06:19

Slide Up/Down does not work properly

1 Answers1