anandnalya/role.css

## role.css
.role_admin, .role_user, .role_guest{
    display:none;
}

## role.js
$(document).ready(function() {
    // We are assuming that jQuery and jQuery Cookie plugin are included in the doc

    var role = $.cookie('user_role'); // Should return one of 'ADMIN', 'USER' OR 'GUEST'

    // set property for relevant css class
    var cssClass = '.role_'+ role.toLowerCase();
    $("<style type='text/css'> "+ cssClass + "{ display:block } </style>").appendTo("head");
});

## roleOrdered.js
$(document).ready(function() {
    // We are assuming that jQuery and jQuery Cookie plugin are included in the doc

    var role = $.cookie('user_role'); // Should return one of 'ADMIN', 'USER' OR 'GUEST'

    // set property for relevant css class
    if(role == "ADMIN") {
        // make everything visible
        $("<style type='text/css'>.role_admin, .role_user, .role_guest {display:block} </style>").appendTo("head");

    } else if(app.role == "USER") {
        // make user and guest part visible, admin part will remain invisible
        $("<style type='text/css'>.role_user, .role_guest {display:block} </style>").appendTo("head");

    } else if(app.role == "GUEST") {
        // only show the guest part
        $("<style type='text/css'>.role_guest {display:block} </style>").appendTo("head");
    }
});

## roleSample.html
<html>
<head>
<link href="./role.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="role_admin">This should be visible to admin only.<h1>
<h2 class="role_user">This is for the normal logged in user.</h1>
<h3 class="role_guest">And this is for the guest.</h1>
</body>
</html>
	$(document).ready(function() {
	// We are assuming that jQuery and jQuery Cookie plugin are included in the doc

	var role = $.cookie('user_role'); // Should return one of 'ADMIN', 'USER' OR 'GUEST'

	// set property for relevant css class
	var cssClass = '.role_'+ role.toLowerCase();
	$("<style type='text/css'> "+ cssClass + "{ display:block } </style>").appendTo("head");
	});
	<html>
	<head>
	<link href="./role.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<h1 class="role_admin">This should be visible to admin only.<h1>
	<h2 class="role_user">This is for the normal logged in user.</h1>
	<h3 class="role_guest">And this is for the guest.</h1>
	</body>
	</html>