Question

Im sorry to write such a dumb Title. But i did not get any other keywords.

anyways the functionality i want is that I’m making a chat application so in my page there’s a list of online users. when clicked on user 1 , a div with the name of the clicked user opens on the right side of the page. but then the problem is that when i click the other users name on the users list then the previous users div should close and the 2nd users div should open up.

example :
USERS LIST :

USER 1
USER 2

onclick USER 1 = DIV 1 shows up.

then when i click USER 2.

then DIV 1 should hide and DIV 2 should show up.

so if there’s USER 3 and if DIV 1 is open and if i click USER 3 then DIV 1 should hide and DIV 3 should show up.

I hope i was clear enough 🙂

THE CODE :

<?php
   $get = mysql_query("SELECT * FROM friends WHERE online='1' AND to_id='$pid' AND active='Confirm'");
   while($get2 = mysql_fetch_assoc($get))
   {
    $id = $get2['id'];
    $senderid = $get2['sender_id'];

    $getpic = mysql_query("SELECT * FROM people WHERE id='$senderid'");
    $getpic2 = mysql_fetch_assoc($getpic);
    $mypic = $getpic2['filename'];
    $pic = "<img src=\"images/" .$mypic. "\" width=\"40\" height=\"40\">";

    $getname = mysql_query("SELECT * FROM users WHERE id='$senderid'");
    $getname2 = mysql_fetch_assoc($getname);
    $name = $getname2['fname'];

    echo "<style>table#user-$id:hover{background-color : #86daff; cursor : pointer;}</style><table width=\"200\" id=\"user-$id\">
    <tr>
    <td width=\"40\" style=\"padding-right : 4px;\">
     $pic
    </td>
    <td style=\"padding-right : 10px;float : left; color : blue;font-weight : bold;\">
    $name
    </td>
    <td>
    <table width=\"10\" height=\"10\" title=\"New Message !\" bgcolor=\"red\"><tr><td>    </td></tr></table>
    </td>
    </tr>
    </table>




    ";
    ?>


  <script>
  $(document).ready(function(){


     $("table#user-<?php echo $id; ?>").click(function(){

        $("#chatholder-<?php echo $id; ?>").show();

        //$("#chatinner-<?php echo $id; ?>").html(<?php echo $name; ?>);



     });



  });


  </script>


  </div></div></td>
  <td width="100">
 </td>
    <td>

    <div id="chatholder-<?php echo $id; ?>" style="display : none;float : right;width : 500px; height : 500px; border : 1px solid #d7d7d7;">
  <div id="chatinner-<?php echo $id; ?>" style="background-color : #86daff; padding-top : 5px; text-align : center; color : white; font-weight : bold; font-size : 14px;height : 25px; ">
  <?php echo $name; ?>
  </div>

  <br/>

<div id="send">
<textarea></textarea>

</div>



  </div>

















  <script>

  $('#chatholder-<?php echo $id; ?>').click(function(event){

                event.stopPropagation();

        });

         $('table#user-<?php echo $id; ?>').click(function(event){

               event.stopPropagation();

        });
        $('html').click(function() {

               $('#chatholder-<?php echo $id; ?>').hide();
                      });



  </script>

 </td>
   <?php

   }


 ?>

Answer 1

provide all the div’s the same class let say ‘.chat’ and then hide all the div’s with class ‘.chat’ and show the one you want to show for ex

<div id="user1" class="chat">
<div id="user2" class="chat">
<div id="user3" class="chat">

and now if you want to show the div with id user3 you can do something like this

$('.chat').hide();
 $('#user3').show();

and if you are using any click event to show and hide stuff then work with live click instead of just click

$('#somebutton').live("click",function(){
     $('.chat').hide();
 $('#user3').show();
});