I am trying to hide one of this drop down menu when the user is log-in or log-out, I use $_Session
to know if the user is logged in. Something is wrong with my JavaScript. Hope anyone could help. Thanks !!Here is my code:
The two drop down menu i want to hide/show:
<li class="dropdown" id="account" >
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu" >
<li><a href="#">Login</a></li>
<li class="divider"></li>
<li><a href="#">Register</a></li>
</ul>
<li class="dropdown" id="user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<?php
if(isset($_SESSION['username'])) {
echo ' '.htmlentities($_SESSION['username'], ENT_QUOTES, 'UTF-8');
}
?>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
And here is my JavaScript code:
<script type="text/javascript">
if (isset($_SESSION['username'])) {
$('#user').show();
$('#account').hide();
} else {
$('#user').hide();
}
</script>
You can use PHP to include a class on the div you want this way you might not need javascript and/or jQuery
<li class="dropdown <?php if(isset($_SESSION['username'])){echo "notvisible";} ?>" id="account" >
And use the class with CSS to set
.notvisible { display:none; }
You can also use a .toggleclass() or other means of hiding/showing menu afterward if you want.
Another way would be to echo the menu you want with PHP eg:
<?php
if(isset($_SESSION['username'])) {
echo "<li class=\"dropdown\" id=\"account>\"" >>> and whatever you want
} else {
echo "<li class=\"dropdown\" id=\"account\">" Hello user".$_SESSION['username']."And whatever else"
}
?>