Hiding and displaying a menu using javascript in mvc

Question

I am using mvc in which I have two type of users; "student" and "staff". I want to filter these users and show a menu to them which, depending whether the user is a student or staff, should change. I'm trying to do this with Javascript.

How do I accomplish this?

This is what I already have:

<strong>STAFF USER</strong>

<div id="menucontainer">
    <ul id="menu">                  
        <li>@Html.ActionLink("Staff Details", "StaffDetails", "Home")</li>
        <li>@Html.ActionLink("Collection Master", "CollectionMaster", "Home")</li>
        <li>@Html.ActionLink("Question Bank Master", "QuestionBankMaster", "Home")</li>
        <li>@Html.ActionLink("Student Details", "StudentPersonnelDetails", "Home")</li>
        <li>@Html.ActionLink("Answer Sheet", "Answersheet", "Home")</li>
        <li>@Html.ActionLink("Login", "Login", "Home")</li>
        <li>@Html.ActionLink("Exam Master", "ExamMaster", "Home")</li>
        <li>@Html.ActionLink("Assign", "Assign", "Home")</li>
    </ul>
</div>

<strong>STUDENT USER</strong>

<div id="menucontainer1">
    <ul id="menu1">                  
        <li>@Html.ActionLink("Student Details", "StudentPersonnelDetails", "Home")</li>
        <li>@Html.ActionLink("Answer Sheet", "Answersheet", "Home")</li>
    </ul>
</div>

Answer 1

Straightforward example:

<script type="text/javascript">
  function Foo()
  {
       if(@Roles.GetRolesForUser().Contains("Staff"))
       {
           document.getElementById('menucontainer').style.display = 'block';
           document.getElementById('menucontainer1').style.display = 'none';
       }
       else
       {
          document.getElementById('menucontainer').style.display = 'none';
          document.getElementById('menucontainer1').style.display = 'block';
       }
  }
</script>