Jump to content

Tabs within tabs — not working


Recommended Posts

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 by makiony
Link to post
Share on other sites

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 by dsonesuk
  • Thanks 1
Link to post
Share on other sites

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 by dsonesuk
  • Thanks 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...