Pankaj Morajkar Pankaj Morajkar - 5 months ago 12
CSS Question

Show and Hide Tabs with if else

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)
{
<ul 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>
}
else {
<ul 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>
}


Here is my html and css. Can somebody please help me to understand where to insert the above statement in the code to make it work?

https://jsfiddle.net/v475pfv1/

Answer

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>

Comments