Help [Solved] Tabs within Tabs

[Samantha 64]

Could someone possibly provide a basic code for tabs within tabs for a template?

 

We already have our tabbed template but we want to add tabs within one of the tabs and we aren't versed in jQuery and that seems to be the only way to do it. 

 

Could someone be amazing enough to provide the basic code for how to do that or just explain how to do it?

 

I'll be forever grateful <3

[Kit the Human 759]

Is this what you're looking for? (Codepen) Tab 3 contains the nested tabs.

 

I'm just using two sets of radio buttons. The content is hidden with opacity

 

.content,
.inner {
  position: absolute;
  padding: 0 20px;
  opacity: 0;
  top: 100px;
  left: 0;
}

 

And then when the relevant button is clicked, you change the opacity

 

#main [type=radio]:checked ~ label ~ .content,
#main .content [type=radio]:checked ~ label ~ .inner {
  opacity: 1;
}

In the HTML you will see a value called name with the radio buttons. The name kind of groups the buttons together so that user's can only select one of those tabs.

 

Does that help you at all?

[Bishop 172]

Do you have a live version of this somewhere @Kit the Human I'd love to see. I'm trying really hard to work on my information page like this but there is just so much.

[Kit the Human 759]

The codepen is as live as it gets, sorry @Bishop! I'm using threads to organise my informational stuff because I want members to be able to freely submit. 

 

Was there anything specific you need help with? (Feel free to tag me a new topic if that's more appropriate!)

[Bishop 172]

Oh no that actually works perfect! I didn't see that there! I'm working on tabs of my own here: http://venicerp.com/information-page

 

And this would be soooooo helpful!!!! Thank you!!!