Having Issues With JQuery Show/Hide

232
August 13, 2017, at 09:54 AM

/* 
var isDisplayed = $('.afterlogin').css('display', 'block'); 
var isNotDisplayed = $('.afterlogin').css('display', 'none'); 
 
 
if ($('.beforelogin').css('display') == 'none') { 
  alert("Login is hidden so after loggin is visible"); 
  $(isDisplayed); 
} else { 
  alert("Login is visible so after loggin is hidden"); 
  $(isNotDisplayed); 
} 
*/ 
 
 
 
// sets initial status when the page loads - this can be done by CSS as well 
 
if ($('input#loggedIn').prop('checked')) { 
  alert('Login is visible so after-loggin is hidden'); 
  $('.beforelogin').css('display', 'none'); 
  $('.afterlogin').css('display', 'block'); 
} else { 
  alert('Login is visible so after-loggin is hidden'); 
  $('.beforelogin').css('display', 'block'); 
  $('.afterlogin').css('display', 'none'); 
} 
 
 
$('input[name = "loginStatus"]').change(function() { 
  if ($('input#loggedIn').prop('checked')) { 
    alert('Login is not displayed and after-loggin is displayed'); 
    $('.beforelogin').css('display', 'none'); 
    $('.afterlogin').css('display', 'block'); 
  } else { 
    alert('Login is displayed so after-loggin is not displayed'); 
    $('.beforelogin').css('display', 'block'); 
    $('.afterlogin').css('display', 'none'); 
  } 
});
* 
{ 
  font-family: 'Montserrat', sans-serif; 
  color: white; 
  margin: 0; 
  padding: 0; 
} 
 
/* 
 
COLORS 
 
%15: #23272A 
%19: #2C2F33 
%23: #3A3B3C 
 
*/ 
 
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; 
} 
 
/* HEADER ENDS HERE */ 
 
body { 
  background-color: #23272A; 
} 
 
.dicecontainer 
{ 
  max-width: 650px; 
  margin: 0 auto; 
  display: flex; 
  flex-direction: column; 
  margin-top: 20px; 
} 
 
.dicenavigationcontainer 
{ 
  text-align: center; 
  margin: 0; 
  padding: 25px; 
} 
 
.dicenavigationcontainer a 
{ 
  margin: 20px; 
  padding: 20px; 
  background-color: #2C2F33; 
} 
 
.dicenavigationcontainer .active 
{ 
  background-color: #FF9F00; 
} 
 
/* BODY ENDS HERE */ 
 
footer 
{ 
  background-color: #23272A; 
  position: absolute; 
  text-align: center; 
  clear: both; 
  width: 100%; 
  bottom: 18px; 
  font-size: 12.5px; 
} 
 
/* FOOTER ENDS HERE */
<!DOCTYPE html> 
 
<html> 
 
  <head> 
 
    <link href="./css/style.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet"> 
    <link rel="shortcut icon" href="./img/favicon.png" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <meta name="description" content="Provably Fair Bitcoin Gambling"> 
    <meta name="keywords" content="bitcoin, crypto, currency, cryptocurrency, gambling, moneypot, dice"> 
    <meta name="author" content="Arszilla"> 
 
    <title>btcasi.no | Provably Fair Bitcoin Gambling</title> 
 
  </head> 
 
  <body> 
 
    <script src="./js/app.js" type="text/javascript"></script> 
 
    <header> 
 
      <div id="logo"> 
 
        <a href="index.html"><img src="./img/btcasi.no.png" title="btcasi.no | Provably Fair Bitcoin Gambling"></img></a> 
 
      </div> 
 
      <div class="beforelogin"> 
 
        <div id="rightnavbar"> 
 
          <ul> 
 
            <li><a href="#">Login</a></li> 
 
          </ul> 
 
        </div> 
 
      </div> 
 
      <div class="afterlogin"> 
 
        <div class="navbar"> 
 
          <div id="leftnavbar"> 
 
            <ul> 
 
               <li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li> 
 
 
            </ul> 
 
          </div> 
 
          <div id="rightnavbar"> 
 
            <ul> 
             
              <li><a href="index.html">User Panel</a></li> 
 
              <li><a href="index.html">News</a></li> 
 
              <li><a href="index.html">View on Social Media</a></li> 
 
              <li><a href="index.html">Logout</a></li> 
 
            </ul> 
 
          </div> 
 
        </div> 
 
      </div> 
 
    </header> 
 
    <footer> 
 
      <p>Copyright (c) 2017</p> 
 
    </footer> 
 
  </body> 
 
</html>

The JS code was given to me as the answer the other day from my question.

Now I am trying to have .afterlogin stay invisible till the user logs in to the external site that I will redirect them to. After that .afterlogin takes over .beforelogin. So Login disappears, Logout and the 3 other buttons along with Balance pops up.

Issue is I am not sure where but this doesnt work for some reason. There is some error in my code. Not sure if I didn't link the JS correctly or something.

I copy paste this exact code on Codepen and it works to some extent. Only .beforelogin remains there and .afterlogin is hidden; but when I click on Login nothing happens.

How can I have users have no access to .afterlogin till they fully login from my external site and then .afterlogin comes up and .beforelogin disappears?

Answer 1

use addclasss and removeClass

$('.beforelogin').addClass('show').removeClass('hide'); // to show
$('.beforelogin').addClass('hide').removeClass('show'); // to hide
Rent Charter Buses Company
READ ALSO
Height of the Monaco Editor

Height of the Monaco Editor

I want to make a very simple Monaco Editor: JSBin:

432
How do I absolute position an element X% inside a container?

How do I absolute position an element X% inside a container?

In my project I have a structure like this:

304
React Masonry support

React Masonry support

I am using React isomorphic rendering with Masonry pluginProblem is that Masonry works only when I change resolution (for example if I got to mobile and back)

522
Hand drawing effect on svg text

Hand drawing effect on svg text

I want to create a hand drawing effect on a svg text that I created in Inkscape with a custom typography from daFont and what I got was this:

241