Control What Content is Shown Based on if a User is Logged in or out

When setting up a secure zone on a website, sometimes we will want to show specific content only when a user is logged in and vice-versa. This post will quickly review how to do so.

Wednesday, February 22, 2012 - Posted by Carol Lemke to Technical How-tos

Why would you want to do this?

Below are a few examples of why choosing to hide/show specific content when a user is logged in/out would improve the user experience on a site.

Navigation: There is a specific public navigation and a specific member navigation that should show. Perhaps the public navigation would read, "Create an Account | Login" and the member navigation would read, "My Account | Signout" and

Advertise: If a user is not logged in, you may want to have an advertisement throughout the site that directs people on how to register with your site. Once that person finally registers and logs in, you would want to replace that ad with more member relevant content.

eCommerce: A person is only able to add to their wish list when they are logged in. If they click Add to Wish List when they are logged out, they will be directed to the log in screen. To make this experience a bit more user friendly, you could hide that Add to Wish List link and show some text when a user is logged out to say, "To add to your wishlist, please login". Then once logged in, they will be able to use the functionality of Add to Wish List correctly.

The Code

Place before the closing </head> in a <script>

Place within an external JS file Remember to hide the #member-div within the CSS
comments powered by Disqus