Skip navigation

Currently Being Moderated

Showing the contents of a hidden div tag if a registered visitor is logged in

Sometimes it is helpful to initially hide an element, and then check to see if the visitor is logged in.

 

If the visitor is logged in, you can add logic to display that hidden element. In this case, you can use the {module_isloggedin} module that displays a value of 1 if customer is logged in and 0 if they are not logged in.

 

Javascript Option

 

Add the following code to hide the div container and its contents:

 

 

<div id="hiddenform" style="display:none">
...
</div>

 

And this is the script used to display the div container if the visitor is logged in:

 

 

var loggedin = "{module_isloggedin}";
if  (loggedin == 1)
document.getElementById('hiddenform').style.display = "block";

 

Pure CSS Option

 

To accomplish similar through just CSS and also have the ability to target multiple elements very easily you can do the following:


HTML

<body class="logged-{module_isloggedin}"> 


CSS

div.something { display:hidden; }
.logged-1 div.something { display:block; }


You could also use .logged-0 if you wanted to hide content when someone has logged in as the reverse of the above.

 

In jQuery Scripts

 

If you have written your javascript in an external .js file and wish to target elements using the isloggedin module you can use the following using the HTML Method in the CSS Option as your target.

 

if ( $('body').hasClass('logged-1') ) { 
     // Run your code
 }
 
Comments (0)