title: How to have certain buttons and balance show after login
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
    width: 100%;
    background-color: #2C2F33;
    border-bottom: 5px #FF9F00 solid;
    font-size: 12.5px;
    display: flex;
    align-items: center
  }
  
  #logo img {
    float: left;
    margin: 0;
    padding: 20px;
    width: 125px;
    height: 42.5px;
    background-color: #2C2F33;
  }
  
  .beforelogin {
    display: flex;
    justify-content: space-between;
    margin-left: auto;
  }
  
  .afterlogin {
    display: flex;
    justify-content: space-between;
    margin-left: auto;
  }
  
  .navbar {
    display: flex;
    justify-content: space-between;
    margin-left: auto;
  }
  
  li {
    display: inline;
    padding: 0 20px 0 20px;
  }
  
  #rightnavbar li {
    display: inline-block;
    position: relative;
  }
  
  .navbar,
  li,
  a {
    text-decoration: none;
    list-style-type: none;
    text-transform: uppercase;
    background-color: #2C2F33;
    position: relative;
  }
  
  #rightnavbar a:hover {
    color: #FF9F00;
  }
  
  #rightnavbar a::before {
    content: '';
    display: block;
    height: 3px;
    background-color: #FF9F00;
    position: absolute;
    top: -34px;
    width: 0%;
    transition: all ease-in-out 225ms;
  }
  
  #rightnavbar a:hover::before {
    width: 100%;
  }
  
  #userbalance {
    background-color: #23272A;
    padding: 12.5px;
    margin-right: auto;
    border: 2.5px #FF9F00 solid;
  }
  
  #balance,
  #dsh {
    color: #FF9F00;
  }
  
  #dosh {
    color: #FFFFFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  
    &lt;div id="logo"&gt;
  
      &lt;a href="index.html"&gt;&lt;img src="./img/logo.png" title="Website Info"&gt;&lt;/img&gt;
      &lt;/a&gt;
  
    &lt;/div&gt;
  
    &lt;div class="beforelogin"&gt;
  
      &lt;div id="rightnavbar"&gt;
  
        &lt;ul&gt;
  
          &lt;li&gt;&lt;a href="index.html"&gt;Login&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="afterlogin"&gt;
  
      &lt;div class="navbar"&gt;
  
        &lt;div id="leftnavbar"&gt;
  
          &lt;ul&gt;
  
            &lt;li id="userbalance"&gt;&lt;span id="balance"&gt;Balance:&lt;/span&gt; &lt;span id="dosh"&gt;1.00000000&lt;/span&gt; &lt;span id="dsh"&gt;DSH&lt;/span&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  
        &lt;/div&gt;
  
        &lt;div id="rightnavbar"&gt;
  
          &lt;ul&gt;
  
            &lt;li&gt;&lt;a href="index.html"&gt;User Panel&lt;/a&gt;&lt;/li&gt;
  
            &lt;li&gt;&lt;a href="index.html"&gt;News&lt;/a&gt;&lt;/li&gt;
  
            &lt;li&gt;&lt;a href="index.html"&gt;View on Social Media&lt;/a&gt;&lt;/li&gt;
  
            &lt;li&gt;&lt;a href="index.html"&gt;Logout&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to make my website, where after user logs in <code>.beforelogin</code>'s <code>&lt;li&gt;</code> disappears and <code>.afterlogin</code>'s <code>&lt;li&gt;</code> appears. </p>
  
  <p>So there is only <code>Login</code> button for the user till the user logs in (In the header/navbar) and after login the <code>Login</code> exchanges its place for <code>Logout</code> and 3 other buttons and User Balance appears.</p>
  
  <p>I asked a webdev friend and he said to use JavaScript/jQuery but I am not that good in those. I am still trying to find some good tutorials to learn JavaScript/jQuery for webdev but I am not sure where to look for.</p>