Bonjour ! I'm Dark Yada from Vanguard, here with another topic on how to make your communities a bit more accessible.
Several communities on Fandom use tabbers in their infoboxes, which allows displaying several images in an infobox. The Portable Infobox tool comes with an integrated tabber functionality, usable via the <gallery> or <tabber> tags instead of a simple file name. On mobile, these tabbers are available in the form of swipe-through slides.
Some communities use a non-standard (and therefore unsupported by Fandom) JavaScript solution. There are many homegrown variations, making resulting behavior unpredictable. A few communities, however, use tabbers in an even more complex way: instead of regular tabbers, they use successive “layers” of tabbers contained within each other. This method of multiple layers of tabbers, known as nested tabbers, is generally used on communities that tend to display most, if not all, images of the subject in the infobox. Notable examples include images of characters appearing in multiple media, which are then further classified on different parameters. Nested tabbers, however, are not portable and should be avoided when viable alternatives are available.
What's a tabber, anyway?[]
A tabber is a catch-all term to address content filed in a single article, located inside panes with labeled text indices. In other words, like the files in a file cabinet, the label sticks out of the top and each new interior shows something different. Usually, the interior is a single image. Other times it can be text, or even full article pages (in the case of TabView). The codes to create tabs are fairly complex and difficult for most to understand without practice and experience. There are also significant variations in the methods of how they organize content to display, including both officially supported extensions and user-created JavaScript.
In terms of portability, such functions are difficult to display on mobile devices; they tend to conceal much more than they should, show more than intended, leave some content entirely unavailable, lack a way to select other content using touch, or (at worst) leave behind garbage on the screen that can not be reconciled. Wikipedia, for these reasons and more, does not allow tabbed content.
Some modern design guidelines, like the suggestions by Google's Material Design, have strict recommendations about how tabs should behave. Implementing an interface that everyone can use on any device in a beautiful way is possible, but can only be achieved by using some standard conventions. The only fully portable solution for tabbed content supported by Fandom is for images in infoboxes. Other tabbed content may be possible with future development, but only if communities start with a standard based solution; otherwise, a variety of mutually conflicting solutions can not be anticipated.
A few communities uses tabbers in another way: they put one tabber inside another tabber; or, in other words, they use nested tabbers. For example: some wikis want to put both Manga and Anime images of a character; when the character himself has several versions, they want to put one tabber for Manga and Anime images, and one inside Manga or Anime tabs to display each variant of the character. That option is actually not available in a Portable Infobox.
Why to not use nested tabbers on a Portable Infobox[]
Actually, nested tabbers on a Portable Infobox can’t be displayed correctly on mobile skin. The possible solutions would be not friendly for the mobile readers, mainly because the result is would be too small for them to navigate effectively. Since portability is the idea that an element on desktop can be displayed on all platforms appropriately, it is logical to not display nested tabbers on desktop, either.
A way that a few wikis who have converted their infoboxes into Portable Infoboxes use is placing the image variable into a <navigation> tag. That way, the nested tabber can be displayed on desktop as it was on the non-Portable Infobox through a separate template, such as {{Switch}}. Without a separate template, that method will not work. This can be a solution for communities that don't want to make many changes when they migrate their infoboxes, but it isn't recommended at all. The main problem is that a lot of {{Switch}} templates use JavaScript, which doesn't work on mobile at all. The JavaScript code can give a really strange result on mobile, like you can see on this screenshot taken from One Piece Wiki.
The result is generally not portable at all. Sometimes, JavaScript code can even break all the images from an infobox and no image will be displayed. Therfore, nested tabbers cannot be portable. Often, though, communities still need to display several pictures in an infobox. There are ways to replace nested tabbers.
Alternative ways to nested tabbers[]
An alternative way that communities can use instead of having nested tabbers on their infoboxes is to put every image originally in the nested tabber into normal PI tabbers. The infobox will have the same number of pictures, but they will be at the same “level”. For example, when an infobox uses nested tabbers with Manga and Anime tabs, you could put "Manga - First nested tabber name", "Anime - First nested tabber name", etc, instead of using a nested tabber.
However, there can be a problem with how will the infobox look if you choose this path: if the lines are too big, the tabs can take too much place and the result won't have a great look. It is also better to avoid putting too many images in an infobox: too many tabs can be unfriendly for the readers. For example, they won't want to click on 10 pictures of a character in just a simple infobox. For example, on the Metal Gear Wiki, an infobox uses currently 8 images in one infobox that doesn't look great.
The Metal Gear Wiki uses 8 different images for this Infobox and the result does not look great on desktop.
When there are too many images in a Portable Infobox, the best way to use is to put some of them elsewhere on the page, such as on a gallery at the end of the page. Galleries outside of an infobox are perfectly portable, and that way will be more friendly for your readers. You can describe them with a caption, and it will have a better look for your page.
Comparison of the code from galleries, tabbers and Switch templates[]
The gallery syntax is particularly simple. They can be used on image lines in Portable Infoboxes, and will give a good result on the mobile skin.
<gallery> File:Image1.png | Tab Title File:Image2.png | Tab 2 Title </gallery>
Tabber syntax is a bit harder, compared to galleries. They still do the same thing as the <gallery> tag, and are portable:
<tabber> Tab Title = [[File:Image1.jpg]] |-| Tab 2 Title = [[File:Image2.jpg]] </tabber>
{{Switch}} templates are also harder to use, compared to galleries. They also require a separate template that has to be coded by editors, while often using JavaScript, which is not portable at all. Their code can change, but is usually:
{{Switch
|option1 = Tab Title
|image1 = Image1.png
|option2 = Tab 2 Title
|image2 = Image2.png
}}
Conclusion[]
In conclusion, we can say nested tabbers are not portable and a way to easily make them portable doesn't seem possible. You can always recreate them by using external templates through a <navigation> tag, which may require JS, but this result won't be portable and the look of your infobox on the mobile skin won't be great and won't "look good". There are still other ways you can use to put your pictures on your infobox, or elsewhere on the page: the best ways are to put all the tabs "at the same level", with a more descriptive name, or to put your images on a gallery, elsewhere on the page. Those solutions are portable and look good on the Mercury skin.