Nested tabs, or display content based on several selected tabs

[TobyBoyne]

Hi! Thanks for all your work on this repo :)

I am interested in making an extension that supports nested tabs inspired by the "install pytorch" table on this page, and this excellent tool. Essentially, I want a series of options, with a display at the end that is affected by all of them.

Naive implementation

This can be naively done with the tabs extension, as below for a "cookie recipe":

/// tab | With milk
//// tab | Chocolate
100ml milk, 50g cooking chocolate
////

//// tab | Vanilla
100ml milk, 1tsp vanilla extract
////
///

/// tab | Lactose free
//// tab | Chocolate
100ml oat milk, 50g cooking chocolate
////

//// tab | Vanilla
100ml oat milk, 1tsp vanilla extract
////
///

However, this leads to a lot of duplication (which would quickly get out of hand with more rows), and doesn't preserve state across tabs (changing the "milk/lactose free" option would change the "chocolate/vanilla" option back to its default).

My attempt

The solution I'm trying now supports templating of the output, like so:

/// configtab | With milk

///
/// configtab | Lactose free

///
/// configtab | Chocolate
    new: true
///
/// configtab | Vanilla

///

/// configdisplay
{% set extraingredient = "1tsp vanilla extract" if vanilla else "50g cooking chocolate"%}
100ml {% if lactose-free %}oat{% endif %} milk, {{ extraingredient }}
///

Here, I process the content using jinja2 to create one content block for each possible combination during the mkdocs build step. This does still lead to a large number of divs, with only one having display: block; at a time.

Questions

1. Do you know any existing tools that do something similar? I couldn't find any general-purpose tools.
2. Is there a good templating approach that can work with javascript+mkdocs, so that the display can be generated on-the-fly?
3. Could this be done css-only? I like the fact that Tabs doesn't require javascript, and it would be nice if I could do that too.
4. I'm struggling a bit when the display is a code block - I have set ConfigDisaply.on_markdown to return raw, but then it doesn't do any highlighting on that. I'm a bit unclear on the order in which the content of the display is processed.

Thanks for reading! Any advice is really appreciated :)

[facelessuser]

preserve state across tabs (changing the "milk/lactose free" option would change the "chocolate/vanilla" option back to its default).

This is not how it actually works.

If you have JavaScript managing tab states, then yes, it is possible the JS is changing states of unrelated tabs.

It's possible I might be misunderstanding what you are saying, so you would need to clarify.

However, this leads to a lot of duplication (which would quickly get out of hand with more rows)

I cannot speak to your specific case, but it is possible one could find defining multiple tabs cumbersome. This is all subjective, so desiring a different, custom approach is fine as long as you are willing to put in the effort, which it sounds like you are.

Do you know any existing tools that do something similar? I couldn't find any general-purpose tools.

This question seems ambiguous to me. If you are asking is there a tool that handles tabs exactly how you want to handle them, then I don't know. I don't exactly understand what you are trying to achieve. I can't quite conceptualize exactly what you are trying to do.

Is there a good templating approach that can work with javascript+mkdocs, so that the display can be generated on-the-fly?

There may be, but I don't know off the top of my head. I don't necessarily have time to delve into figuring out custom solutions for people, unfortunately. I also don't have a clear grasp of what you are doing.

Could this be done css-only? I like the fact that Tabs doesn't require javascript, and it would be nice if I could do that too.

I'm not exactly sure what you are trying to do, so it is hard for me to answer. I'm still unclear on what you are trying to achieve.

I'm struggling a bit when the display is a code block - I have set ConfigDisaply.on_markdown to return raw, but then it doesn't do any highlighting on that. I'm a bit unclear on the order in which the content of the display is processed.

I'd have to have explicit examples and code to understand exactly what you are doing.

[TobyBoyne]

This is not how it actually works.

You're right - I'm specifically referring to the behaviour where, on some of your clicks, you will notice that changing the first layer tab will "change the state" of the second layer tab. This is just a consequence of the two different instances of the "chocolate/vanilla" tabs not being synced up in any way, which is of course expected default behaviour.

No worries on the other points! I just didn't want to reinvent the wheel if someone else had produced something similar, but it doesn't sound like it. I'll keep working on it, and if I have more specific problems I may come back here.

Thanks for the response!

[facelessuser]

I think you are just seeing CSS animation stuff when changing tabs. You can probably remove transition animations.

[TobyBoyne]

You can see what I'm referring to in the last click of your gif - when you click on "Lactose free", it changes the next tab from "Vanilla" to "Chocolate".

[facelessuser]

Yes, the tabs are nested, so the nested tabs are independent of each other, so their state is independent.

If I click the parent, then its child state is shown. When I click the other parent, its child is shown with whatever state it is currently in. It is showing the state of each child when I select different parents, so you see the state change. You'll notice part way through, I selected "Chocolate" under "Lactose Free", then when I changed parents, it would reflect that moving forward for that specific child.

There is a transition animation that the Material theme has that causes a rendering animation to occur when swapping parents. This can be disabled. Notice I specifically set each child to a different state.

[facelessuser]

The state is changing because I set the the child states to specific states. If you want them synced, this can be done with JavaScript. The CSS animation causes a little jump, but again, that can be disabled if you don't like it. I'm not sure exactly what it is your after, so I'm only guessing.