Show and Hide Tabs with if else

Question

I have some tabs on my Home page. I have two groups, New Joinees and Administrators. I want to hide some tabs for the group New Joinees.

I have the following if else statement, but I am not sure where to insert this in my code.

`if ("New Joinees" in user.groups)` is suppose to be a server code? — Mosh Feu, Jun 30 '16 at 09:08
@mosh...yes correct...That statement is coming from the server name of the group. I don't think the code needs to be modified, just needs to be fit in somewhere to get it to work. — PMM, Jun 30 '16 at 09:08
If this is a server code so in every common language there is engine that take care about this. [php](http://stackoverflow.com/a/722395/863110) for example use ``, which language you are using? — Mosh Feu, Jun 30 '16 at 09:12
@MoshFeu...I am using HTML, CSS, and Javascript. This is a online wiki tool and cant use anything other than these languages. — PMM, Jun 30 '16 at 09:14
Yes if you are using jsps or freemarker, you can add the condition based on that, on the template itself. If its pure html and css, there is an option to add a class to the tabs you wish to hide, eg: restricted, and then add a class to the body using javascript if its a new joinee, and then, add css to hide .new-joinee .restricted { display: none; }. But then the content will be available on page, just hidden. A frontend dev can easily view those through using dev tools. — Arathi Sreekumar, Jun 30 '16 at 09:17
@PankajMorajkar like Arathi said, you can't write the code like this. — Mosh Feu, Jun 30 '16 at 09:19
@ArathiSreekumar...can you show me how this is done. I am not a developer and hence struggling with this issue. Also can I put it in a separate template and call that template in this code? There is a option to do that in this tool. — PMM, Jun 30 '16 at 09:32

score 1 · Accepted Answer · answered Jun 30 '16 at 09:37

You can click on the button toggle and see how the uls replaced based on user.groups variable.

var user = {
  //groups: ['New Joinees']
  groups: []
};

function showHide() {
  document.getElementById('in').style.display = (user.groups.indexOf('New Joinees') > -1) ? 'block' : 'none';

  document.getElementById('not-in').style.display = (user.groups.indexOf('New Joinees') == -1) ? 'block' : 'none';
}

showHide();

function toggle() {
  user = {
    groups: user.groups.length == 0 ? ['New Joinees'] : []
  };
  
  showHide();
}

<ul id="in" class="tabs">
    <li class="tab-link current tab1" datatab="tab-1">'Business System   
Functionality'</li>
    <li class="tab-link tab2" datatab="tab-2">'Product'</li>
    <li class="tab-link tab3" datatab="tab-3">'Environment 
 Administration'</li>
    <li class="tab-link tab4" datatab="tab-4">'Training'</li>
    <li class="tab-link tab5" datatab="tab-5">'Release Notes'</li>
</ul>

<ul id="not-in" class="tabs">
    <li class="tab-link current tab1" datatab="tab-1">'Business System 
Functionality'</li>
    <li class="tab-link tab2" datatab="tab-2">'Product'</li>
    <li class="tab-link tab3" datatab="tab-3">'Environment 
Administration'</li>
    <li class="tab-link tab4" datatab="tab-4">'Training'</li>
    <li class="tab-link tab5" datatab="tab-5">'Release Notes'</li>
    <li class="tab-link tab6" datatab="tab-6">'Architecture'</li>
    <li class="tab-link tab7" datatab="tab-7">'Testing'</li>
    <li class="tab-link tab8" datatab="tab-8">'System Administration'</li>
    <li class="tab-link tab9" datatab="tab-9">'Site Management'</li>
    <li class="tab-link tab10" datatab="tab-10">'Staging'</li>
    <li class="tab-link tab11" datatab="tab-11">'RCB'</li>
</ul>

<hr />
<button onclick="toggle()">Toggle user.groups</button>

Show and Hide Tabs with if else

1 Answers1