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

Version 3

    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">


    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:


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


    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