Tabs within tabs — not working

[makiony]

Hello!
I've been trying to find a solution for this issue for the past few hours and couldn't, so I decided to open a topic myself.

So basically, I'm trying to combine two types of tab coding. I'm using this How To as the "pages" and using ul.tabs format as "subtabs" within that content.
Upon reloading the page, everything seems to be working perfectly at first glance. However, I'm getting a lot of issues that I can't understand as soon as I change from one "page" to another.

• "Subtab 1" is set as active / default. But when changing "pages", the tab loses its customization. From this -> to this.
• When changing pages, the only subtab that maintains the customization is the last one that was manually clicked, and only in the specific page where it was clicked. 
• If I click on "subtab 2" in Page 1 and then go to Page 2, I will immediately see the content for its own "subtab 2" instead of what should be the default subtab for every page, a.k.a subtab 1. 

I know it's confusing but I'm hoping someone has any idea of what's going on here?

Below are the codes I'm using for all of this.

 

PAGES / THE "HOW TO" TABS SCRIPT:

<script>

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";   }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");   }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active"; }

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

</script>

 

UL.TABS SCRIPT FOR "SUBTABS":

<script>

$(document).ready(function(){
   $("ul.tabss li").click(function(e){
       if (!$(this).hasClass("active")) {
           var tabNum = $(this).index();
           var nthChild = tabNum+1;
           $("ul.tabss li.active").removeClass("active");
           $(this).addClass("active");
           $("ul.tabs li.active").removeClass("active");
           $("ul.tabs li:nth-child("+nthChild+")").addClass("active");
       }
   });
});

</script>

 

CSS FOR BOTH FORMATS:

/* SUBTABS */

ul.tabss {
    list-style-type: none;
    padding: 0;
    text-align: center;
    font-size:9px;
    letter-spacing:1px;
    text-transform: uppercase; }
 
ul.tabss li {
    display: inline-block;
    background-color: #080808;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 5px;
    margin-bottom: 5px;
    color: #b77b8b;
    text-shadow: none;
    font-family: 'Courier Prime', monospace;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer; 
    border-bottom: 2px solid #b77b8b;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }
 
ul.tabss li:hover {
    color: #000;
    background-color: #b77b8b;
    text-shadow: none;
    border-bottom: 2px solid #b77b8b;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }
 
ul.tabss li.active {
    color: #000;
    text-shadow: none;
    background-color: #b77b8b;
    border-bottom: 2px solid #b77b8b; }
 
ul.tabs {
    list-style-type: none;
    margin: 0;
    padding: 0; }
 
ul.tabs li {
    display: none; }
 
ul.tabs li.active {
    display: block;}  
    
    

/* MAIN TABS */

.tab {
    list-style-type: none;
    padding: 0px;
    text-align: center;
    font-size:10px; }

.tab a {
    background:transparent;
    height: 50px;
    width: 50px;
    display: inline-block;
    padding: 0px;
    margin: 5px;
    border: 0px solid transparent;
    outline: none; 
    border-radius: 50%;
    -moz-transition-duration:.7s;
    -webkit-transition-duration:.7s;
    -o-transition-duration:.7s;
    -webkit-filter: blur(0px); }

.tab a:hover {
    background:transparent;
    height: 50px;
    width: 50px;
    display: inline-block;
    padding: 0px;
    margin: 5px;
    border: 0px solid transparent;
    outline: none; 
    border-radius: 50%;
    -moz-transition-duration:.7s;
    -webkit-transition-duration:.7s;
    -o-transition-duration:.7s;
    -webkit-filter: blur(0px); }

.tab a.active {
    background:transparent;
    height: 50px;
    width: 50px;
    display: inline-block;
    padding: 0px;
    margin: 5px;
    border: 0px solid transparent;
    outline: none; 
    border-radius: 50%;
    -moz-transition-duration:.7s;
    -webkit-transition-duration:.7s;
    -o-transition-duration:.7s;
    -webkit-filter: blur(0px);
    -webkit-filter: grayscale(0%); }
    
.tab a.active img {
    -webkit-filter: grayscale(0%); }

.tab img {
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    -webkit-filter: grayscale(70%); }
    
.tab img:hover {
    -webkit-filter: grayscale(0%); }


.tabcontent {
  display: none;
  padding: 5px; 
  padding-top: 20px; }

 

THE HTML:

<div class="tab">

<a class="tablinks" onclick="openCity(event, 'PAGE 1')" title="page 1." id="defaultOpen"><img src="https://static.tumblr.com/yl55q4f/uKVq92olu/011.png"></a> 
<a class="tablinks" onclick="openCity(event, 'PAGE 2')" title="page 2."><img src="https://static.tumblr.com/yl55q4f/uKVq92olu/011.png"></a> 

</div>

<div id="PAGE 1" class="tabcontent">
<ul class="tabss"><li class="active">tab 1</li> <li>tab 2</li> <li>tab 3</li></ul>
<ul class="tabs">

<li class="active">
TAB 1 SECTION.
</li>

<li>
TAB 2 SECTION.
</li>

<li>
TAB 3 SECTION.
</li>

</ul>
</div>

<div id="PAGE 2" class="tabcontent">
<ul class="tabss"><li class="active">tab 1</li> <li>tab 2</li> <li>tab 3</li></ul>
<ul class="tabs">

<li class="active">
TAB 1 SECTION.
</li>

<li>
TAB 2 SECTION.
</li>

<li>
TAB 3 SECTION.
</li>

</ul>
</div>

 

Thank you in advance!

Edited April 20, 2020 by makiony

[dsonesuk]

I would do complete removal of 'active' class from both tabs and tabss if they exist or not. Get index of currently clicked and apply 'active' to .eq(indexref) of .tabs, then 'active' to $(this) currently clicked for .tabss.  No if condition, No css nth-child, never used this? find that .eq() better suited.

If this is what i think you are attempting.

Edited April 21, 2020 by dsonesuk

[dsonesuk]

Looking into this more

When you want to delete all active classes they must be to current siblings() or parent() then move to sibling  (.tabs) with next() to remove/add class

$(this).siblings().removeClass("active");
$(this).parent().next().find("li").removeClass("active");

To add

$(this).addClass("active");
$(this).parent().next().find("li").eq(tabNum).addClass("active");  

 

 

Edited April 21, 2020 by dsonesuk