diff --git a/_includes/tabs.html b/_includes/tabs.html
new file mode 100644
index 00000000..ee537a80
--- /dev/null
+++ b/_includes/tabs.html
@@ -0,0 +1,7 @@
+
+ {% for tab in page.tabs[include.index] %}
+
+
+
{{ include.tabs[forloop.index0] | markdownify }}
+ {% endfor %}
+
diff --git a/assets/css/style.scss b/assets/css/style.scss
index c3f1a253..e064c0f5 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -432,6 +432,39 @@ a.footnote::after {
right: unset;
}
+// Tabs
+.tab-container {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.tab-container > .tab {
+ display: none;
+ order: 99;
+ padding-top: 1rem;
+ width: 100%;
+}
+
+input:checked+label+.tab {
+ display: block;
+}
+
+.tab-container > label {
+ margin-right: 0.25rem;
+}
+
+input:checked+label.btn-outline-secondary {
+ color: #fff;
+ background-color: #6c757d;
+ border-color: #6c757d;
+}
+
+input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline-secondary:active, input:checked+label.btn-outline-secondary:focus {
+ color: #fff;
+ background-color: #5c636a;
+ border-color: #565e64;
+}
+
@media only screen and (min-width: 576px) {
// Version of .position-absolute that only triggers for sm+
.position-absolute-sm {
diff --git a/assets/js/tabs.js b/assets/js/tabs.js
index 2931c558..59bfc96a 100644
--- a/assets/js/tabs.js
+++ b/assets/js/tabs.js
@@ -1,64 +1,32 @@
-function openTab(event, target) {
- for(let element of target.parentNode.parentNode.children) {
- if (element.id.includes("tab")) {
- element.style.display = "none";
- }
- }
+const platforms = {
+ "Win32": "tab-windows",
+ "MacIntel": "tab-macos"
+};
- for(let element of target.parentNode.children) {
- element.classList.remove("btn-secondary");
- element.classList.add("btn-outline-secondary");
- }
-
- document.getElementById(`tab-${target.dataset.tabName}`).style.display = "block";
- target.classList.remove("btn-outline-secondary");
- target.classList.add("btn-secondary");
-
- if(event) {
- let url = new URL(window.location);
- url.searchParams.set("tab", target.dataset.tabName);
- history.pushState({}, "", url);
- }
+function setTab(tab) {
+ let url = new URL(window.location);
+ url.searchParams.set("tab", tab);
+ history.pushState({}, "", url);
}
-// Remove links from tab buttons
-for(a of document.getElementsByClassName("tab-link")) {
- a.href = "javascript:void(0);";
-}
-
-// Open the tabs for the current OS or the default
+// Open the tabs for the current OS or the one in the URL
for(let tabGroup of document.getElementsByClassName("tab-container")) {
- let tab = new URL(window.location).searchParams.get("tab");
- if(tab) {
- openTab(null, Array.from(tabGroup.children[0].children).filter(r => r.dataset.tabName ==tab)[0]);
- break;
- }
+ let tab = null;
- for(let tab of tabGroup.children[0].children) {
- if(tabGroup.classList.contains("tab-os")) {
- if(navigator.platform.includes("Win")) {
- if(tab.classList.contains("tab-windows")) {
- openTab(null, tab);
- break;
- } else if(tab.classList.contains("other")) {
- openTab(null, tab);
- }
- } else if(navigator.platform.includes("Mac")) {
- if(tab.classList.contains("tab-macos")) {
- openTab(null, tab);
- break;
- } else if(tab.classList.contains("other")) {
- openTab(null, tab);
- }
- } else {
- if(tab.classList.contains("tab-other")) {
- openTab(null, tab);
- break;
- }
- }
- } else if(tab.classList.contains("tab-default")) {
- openTab(null, tab);
- break;
- }
- }
+ // Try get tab from URL
+ let urlTab = new URL(window.location).searchParams.get("tab");
+ if(urlTab)
+ tab = Array.from(tabGroup.children).filter(r => r.id == `tab-${urlTab}`)[0];
+
+ // Try get tab for OS
+ if(!tab)
+ tab = Array.from(tabGroup.children).filter(r => r.id == platforms[navigator.platform])[0];
+
+ // Fall back to "other" tab
+ if(!tab)
+ tab = Array.from(tabGroup.children).filter(r => r.id == "tab-other")[0];
+
+ // If a tab was found, open it
+ if(tab)
+ tab.click();
}
diff --git a/pages/_en-US/ds-index/3ds-forwarders.md b/pages/_en-US/ds-index/3ds-forwarders.md
index 606a5948..4ea3f002 100644
--- a/pages/_en-US/ds-index/3ds-forwarders.md
+++ b/pages/_en-US/ds-index/3ds-forwarders.md
@@ -5,6 +5,9 @@ section: ds-index
category: guides
title: DS Game Forwarders (3DS)
description: How to create CIA forwarders to have your DS games on your 3DS's home menu
+tabs:
+ - tab-sd-card: SD card
+ tab-flashcard: Flashcard
---
If you have any issues, check the FAQs on the [GBAtemp thread](https://gbatemp.net/threads/nds-forwarder-cias-for-your-home-menu.426174/).
@@ -85,6 +88,7 @@ After you extract the pack, you can edit `sd:/_nds/nds-bootstrap.ini` and change
- `BOOST_CPU`: If set to 1, TWL clock speed is used, so lags begone
- `SOUND_FREQ`: If set to 1, sound will play at 48 kHz, instead of 32 kHz
{% endcapture%}
+{% assign tab-sd-card = tab-sd-card | split: "" %}
{% capture tab-flashcard %}
1. Download one of these packs:
@@ -103,21 +107,10 @@ After you extract the pack for your card, you can edit `sd:/_nds/ntr_forwarder.i
- `DISABLEANIMATION`: If set to `1` or B is held, the DS / DSi boot screen is skipped
- `HEALTHSAFETYMSG`: If set to `1`, the boot screen's health and safety message will appear on the bottom screen, otherwise the bottom screen stays white with no health and safety message
{% endcapture %}
+{% assign tab-flashcard = tab-flashcard | split: "" %}
-
+{% assign tabs = tab-sd-card | concat: tab-flashcard %}
+{% include tabs.html index=0 tabs=tabs %}
### Part 2: Getting the AP fix files from TWiLight Menu++
If you already have TWiLight Menu++, skip to the next section.
diff --git a/pages/_en-US/twilightmenu/installing-3ds-manual.md b/pages/_en-US/twilightmenu/installing-3ds-manual.md
index e6c03529..75df17d3 100644
--- a/pages/_en-US/twilightmenu/installing-3ds-manual.md
+++ b/pages/_en-US/twilightmenu/installing-3ds-manual.md
@@ -1,7 +1,7 @@
---
lang: en-US
layout: redirect
-destination: installing-3ds?tab=manual#tab-manual
+destination: installing-3ds?tab=manual
title: Installing (3DS, Manual)
---
diff --git a/pages/_en-US/twilightmenu/installing-3ds.md b/pages/_en-US/twilightmenu/installing-3ds.md
index b9dea60b..51e518dc 100644
--- a/pages/_en-US/twilightmenu/installing-3ds.md
+++ b/pages/_en-US/twilightmenu/installing-3ds.md
@@ -5,6 +5,10 @@ section: twilightmenu
category: installing
title: Installing (3DS)
description: How to install TWiLight Menu++ on the Nintendo 3DS
+tabs:
+ - working-camera: Working camera
+ non-working-camera: Non-working camera
+ manual: Manual
---
You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide](https://3ds.hacks.guide) to install it
@@ -21,6 +25,7 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
1. Press A or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
- This will take a while
{% endcapture %}
+{% assign tab-working-camera = tab-working-camera | split: "" %}
{% capture tab-non-working-camera %}
1. Download the `Universal-Updater.cia` file from the [Universal-Updater release page](https://github.com/Universal-Team/Universal-Updater/releases)
@@ -35,6 +40,7 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
1. Press A or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
- This will take a while
{% endcapture %}
+{% assign tab-non-working-camera = tab-non-working-camera | split: "" %}
{% capture tab-manual %}
1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases)
@@ -45,24 +51,9 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide
1. Copy the two `.cia` files to your SD card root
1. On your 3DS, install the two CIAs with FBI
{% endcapture %}
+{% assign tab-manual = tab-manual | split: "" %}
### Installing
-
+
+{% assign tabs = tab-working-camera | concat: tab-non-working-camera | concat: tab-manual %}
+{% include tabs.html index=0 tabs=tabs %}
diff --git a/pages/_en-US/twilightmenu/updating-3ds-manual.md b/pages/_en-US/twilightmenu/updating-3ds-manual.md
index b143b60e..97337727 100644
--- a/pages/_en-US/twilightmenu/updating-3ds-manual.md
+++ b/pages/_en-US/twilightmenu/updating-3ds-manual.md
@@ -1,6 +1,6 @@
---
lang: en-US
layout: redirect
-destination: updating-3ds?tab=manual#tab-manual
+destination: updating-3ds?tab=manual
title: Updating (3DS, Manual)
---
diff --git a/pages/_en-US/twilightmenu/updating-3ds.md b/pages/_en-US/twilightmenu/updating-3ds.md
index 4e777817..ec9a14f1 100644
--- a/pages/_en-US/twilightmenu/updating-3ds.md
+++ b/pages/_en-US/twilightmenu/updating-3ds.md
@@ -5,6 +5,9 @@ section: twilightmenu
category: updating
title: Updating (3DS)
description: How to update TWiLight Menu++ on the Nintendo 3DS
+tabs:
+ - universal-updater: Universal-Updater
+ manual: Manual
---
If updating from a version older than v16.4.0, please move your `.sav` files for DS games to a new folder called `saves`, with the `saves` folder being in the same place as the DS roms.
@@ -17,6 +20,7 @@ If updating from a version older than v16.4.0, please move your `.sav` files for
1. Press A or tap the download icon in the sidebar and select `TWiLight Menu++` to install it
- This will take a while
{% endcapture %}
+{% assign tab-universal-updater = tab-universal-updater | split: "" %}
{% capture tab-manual %}
1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases)
@@ -26,22 +30,12 @@ If updating from a version older than v16.4.0, please move your `.sav` files for
1. Copy the two `.cia` files to your SD card root
1. On your 3DS, install the two CIAs with FBI
{% endcapture %}
+{% assign tab-manual = tab-manual | split: "" %}
### Updating
-