Question

I have a “aside” tag in this tag I have “div” which holds something like a side menu. I would like this menu to display only when user is logged in. If he is not I would like to have there instead of menu a login form. I know how I can check by JavaScript if php session was made, but I don’t know how to replace all the code by other bunch of code. Here is a code:

<aside id="main_section_right">
    <div id="side_menu_div">
        <ul id="account_menu">
            <li class="current"><a href="#">Account</a></li>
            <li><a href="#">Edit Account</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Log Out</a></li>
        </ul>
    </div>
</aside>

Now if user is not logged in I would like code inside “ul” tags to change to this.

<form>
    <li><input type="text" class="form" id="username" name="usr"/></li>
    <li><input type="text" class="form" id="password" name="paw"/></li>
    <li>
        <button type="submit" class="login_button" id="login_button">
            <b>Login</b>
        </button>
    </li>
</form>

Is there any way to do it with jQuery or JavaScript? So it’s all together going to look something like this:

<script type="text/javascript">
    if (logged_in) {
        document.getElementById("side_menu_div").innerHTML = 
    } else {
        document.getElementById("side_menu_div").innerHTML =
    }
</script>

But this work only if I’m changing text, not replacing tags. Well thank you for any help.

Answer 1

Another idea may be to combine the two elements within #side_menu_div and toggle their visibility dependent on the login status. See this jsfiddle

<div id="side_menu_div">
  <div id="loggedin">
   <ul id="account_menu">
     <li class="current"><a href="#">Account</a></li>
     <li><a href="#">Edit Account</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Help</a></li>
     <li><a href="#">Log Out</a></li>
   </ul>
  </div>
  <div id="notloggedid" class="chklogin">
   <form>
    <ul>
     <li><input type="text" class="form" id="username" name="usr"/></li>
     <li><input type="text" class="form" id="password" name="paw"/></li>
     <li><button type="submit" class="login_button" id="login_button">
                     <b>Login</b></button></li>
     </ul>  
   </form>
  </div>
</div>

function to switch display:

function _setMenu(loginstatus){
 if (loginstatus){
    $('#loggedin').show();
    $('#notloggedin').hide();
 } else {
    $('#loggedin').hide();
    $('#notloggedin').show();
 }
}