php - Show Div 2 and Hide Div 1 on click on the same button - Stack Overflow

admin管理员组

文章数量:1414621

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

   }


 ?>

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

   }


 ?>

• php
• javascript
• jquery
• css

Share Improve this question Follow edited Dec 17, 2011 at 12:35 Samir asked Dec 17, 2011 at 12:23 SamirSamir 41933 gold badges77 silver badges1212 bronze badges 3

• Show code example so far. What do you do to open the new window? It should be easy to rework it to close the previous one. What specifically is giving you trouble? – Amadan Commented Dec 17, 2011 at 12:27
• 1 Syed, Stack Overflow is not a place to request work. Try to do it yourself. If you get stuck, we'd love to help. – Ayman Safadi Commented Dec 17, 2011 at 12:27
• @AymanSafadi - i did not request for work. i have the code. I got the half of the functionality. but not getting the above functionality. ill paste the code now – Samir Commented Dec 17, 2011 at 12:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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();
});

Decorate all of the chat divs with an identity class; such as "chat", then do this:

$('.chat').hide()
$('#div1').show()

Instead of show/hide, what about just having one div always there, and just change the contents

本文标签： phpShow Div 2 and Hide Div 1 on click on the same buttonStack Overflow