Hide/remove/show nav bar dynamically in jquery

Question

I have been working on this for quite a long tym..couldnot find a solution..

here is code for a navbar having 3 elements...

<div data-role="navbar" style="background:#82C1D7; margin-top:0.5em;">
  <ul  data-autodividers="true" >
                <li>
                <a href="" style="font:Arial, Helvetica, sans-serif; font-size:14px;background:transparent" onClick="mofcall()">MOF</a></li>
                <li>
                <a href="" style="font:Arial, Helvetica, sans-serif; font-size:14px;background:transparent" onClick="remarkcall()">Remarks</a></li>
                <li>
                <a href="" style="font:Arial, Helvetica, sans-serif; font-size:14px;background:transparent" onClick="approvalcall()">Approval</a></li>
            </ul></div>

MY PROBLEM :

I have an application in which members from different departments of an organisation can login and view their requests/messages..

Now the problem here is that i have a have to be showing only MOF,Remarks(first 2 href of my code) to members of one department and remarks,Approval(last 2 hrefs of my code) only to other department members.. How would i hide or show these dynamically ??? can u pls help me out ??

SIMILAR POST:

enter link description herego to this and come back to my problem

Now as it is specified there i wanna hide my contents dynamically...also my other two contents must take 1/2 width...

Is this clear now ?? or do i still need to be precise ?? Sorry guys..I m new to these stuff...so pls teme if i m not clear !!

If you would like an answer, please improve your question. What have you tried? What backend scripting language are you using? How does your app know what department people are members of? — michaelward82, Jan 30 '13 at 09:05
I don't think this is the sort of thing that you want to be show/hiding on the client side. Somebody outside of your workgroup would still be able to trigger the "invisible" function, which defeats the point of the exercise. — Richard A., Jan 30 '13 at 09:06
try create example of your code in [jsfiddie](http://jsfiddle.net) — Mark Nolan, Jan 30 '13 at 09:07
okay..i think the ques is too tricky..lest say like this...jus help me how to show/hide elements of my nav bar dynamically ??? — , Jan 30 '13 at 09:11

score 2 · Answer 1 · edited May 23 '17 at 12:10

To do this, I had to add 2 navbars, and I only show one or the other, very similar to the solution for this question.

HTML Code

<div id="navbar1" data-role="navbar" style="background:#82C1D7; margin-top:0.5em;">
  <ul data-autodividers="true">
    <li>
      <a href="" style="font:Arial, Helvetica, sans-serif; font-size:14px;background:transparent"
      onClick="remarkcall()">Remarks</a>
    </li>
    <li>
      <a href="" style="font:Arial, Helvetica, sans-serif; font-size:14px;background:transparent"
      onClick="approvalcall()">Approval</a>
    </li>
  </ul>
</div>
<div id="navbar2" data-role="navbar" style="background:#82C1D7; margin-top:0.5em;">
  <ul data-autodividers="true">
    <li>
      <a href="" style="font:Arial, Helvetica, sans-serif; font-size:14px;background:transparent"
      onClick="mofcall()">MOF</a>
    </li>
    <li>
      <a href="" style="font:Arial, Helvetica, sans-serif; font-size:14px;background:transparent"
      onClick="remarkcall()">Remarks</a>
    </li>
  </ul>
</div>

Javascript Code

var isOneDepartment = true;
if (isOneDepartment) {
  $("#navbar1").remove();
} else {
  $("#navbar2").remove();
}

You can change the isOneDepartment variable in jsfiddle, http://jsfiddle.net/c6FHN/2/, to see the change. Since I don't know how your login system works, I'm assuming that you have the ability to check on the client side (the webpage) which department someone is in. I agree with the comment that says this shouldn't be done on the client side, generally a server would handle this, but if you must do it on the client side, this is the best method I could think of.

Having two nav bars and calling them dynamically according to the login uh ??? is dat wat u r suggesting ?? Ok then..Let me try it out ant then come back to u !! — , Jan 30 '13 at 09:54
Sorry I had the old javascript code I used instead of the new jquery code — adr2370, Jan 30 '13 at 22:50
this works, having defined in html two [data-role=navbar] and then toggle visibility using $().hide() and show() — user1040495, Mar 26 '17 at 03:24

Hide/remove/show nav bar dynamically in jquery

1 Answers1