jQuery-function to toggle class exists twice, but only works once - php

Question

I have one index.php page, whose content changes whether you activated a session or are logged out.
When users are logged in, a click on the link "showhide" should show the class "users".
When users are logged out the link "showhide" is hidden and instead the link "showhide2" is visible, which should show the class "users2" when its pressed.
I found a jQuery-snippet online that does exactly this and works fine for the link "showhide"
Unfortunately it doesn't work for the link "showhide2" - the class is always visible...
Here's my code:
<div id="content" style="margin-top:10px;height:100%;">
<?php
/*echo "Der Nutzername ist ".$_SESSION['user'];
echo "<br>Die Session lautet ".$_SESSION['sessionname'];
echo "<br>".session_id();*/
$sArray = explode(".",$_SESSION['sessionname']);
$session1 = $sArray[0];
$session2 = $sArray[1];
$sessionausblenden = $_SESSION['sessionname'];
if (!isset($sessionausblenden)){
echo "<style type='text/css'>
#showhide{
visibility:hidden !important;
}
.users{
visibility:hidden !important;
}
#logout {
visibility:hidden !important;
}
</style>";
}
elseif (isset($sessionausblenden)){
echo "<style type='text/css'>
#showhide2{
visibility:hidden !important;
}
.users2{
visibility:hidden !important;
}
</style>";
}
?>
<a id="showhide" href="#" style="background:#<?php echo $session2?>;">+</a>
<a id="showhide2" href="#" style="background:#<?php echo $session2?>;">?</a>
<a id="logout" onclick="return confirm('Are you sure?')" href="logout.php">-</a>
<script type="text/javascript">
$(document).ready(function () {
$('.users').hide();
$('a#showhide').click(function () {
$('.users').toggle(400);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.users2').hide();
$('a#showhide2').click(function () {
$('.users2').toggle(400);
});
});
</script>
<center><h1>Group Chat In PHP</h1></center>
<div class="chat">
<div class="users" style="background-color:#<?php echo $session2?>;">
<?php include("users.php");?>
</div>
<div class="users2" style="background-color:#<?php echo $session2?>;">
<?php include("users.php");?>
</div>
<div class="chatbox">
<?php
if(isset($_SESSION['user'])){
include("chatbox.php");
}else{
$display_case=true;
include("login.php");
}
?>
</div>
</div>
</div>
You can see the live-version here: http://team3.digital-cultures.net/index.php
Just enter a name of your choice and choose an option from "Start" and "Ziel" and your session is started (and a chat is opened).
Can you help me finding the mistake?
Thanks!

Answer 1

It seems an event is not being bound to #showhide2. If you listen at the document level and let it bubble to #showhide as the target, it may work. This can happen for dynamically loaded elements.
Change
$(document).ready(function () {
$('.users2').hide();
$('a#showhide2').click(function () {
$('.users2').toggle(400);
});
});
To
$(document).ready(function () {
$('.users2').hide();
$(document).on('click','#showhide2',function () {
$('.users2').toggle(400);
});
});
Most importantly, please resolve this error:
$(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight}); on line 2 of chat.js $(".msgs")[0] is undefined.
There are no elements matching $('.msgs'). Wrap it with the following:
if($('.msgs').length) {
$(".msgs").animate({scrollTop:$(".msgs")[0].scrollHeight});
}
This maybe why the event isn't getting bound.