Réaliser des Onglets

mkdocs.yml

markdown_extensions:
  - pymdownx.tabbed:
      alternate_style: true

page.md

=== "Python"
    ```python
    print("Bonjour")
    ```

=== "Bash"
    ```bash
    echo "Bonjour"
    ```

=== "Rust"
    ```rust
    println!("Bonjour");
    ```

✦ Syntaxe native Markdown — aucun HTML ni JS à écrire.

HTML + CSS (sans JavaScript)

<!-- Boutons radio cachés -->
<input type="radio" name="tab" id="t1" checked>
<input type="radio" name="tab" id="t2">

<!-- Labels = les onglets visibles -->
<label for="t1">Onglet 1</label>
<label for="t2">Onglet 2</label>

<!-- Contenu -->
<div id="c1">Contenu 1</div>
<div id="c2">Contenu 2</div>

CSS — le mécanisme clé

/* Tout masqué par défaut */
#c1, #c2 { display: none; }

/* La pseudo-classe :checked fait le travail ! */
#t1:checked ~ #c1,
#t2:checked ~ #c2 { display: block; }

✦ Le sélecteur ~ signifie "frère suivant". Quand le radio est coché (:checked), le contenu correspondant s'affiche. Zéro JavaScript.

HTML + JavaScript vanilla

<div class="tabs">
  <button data-tab="a">Onglet A</button>
  <button data-tab="b">Onglet B</button>
  <div id="a">Contenu A</div>
  <div id="b" hidden>Contenu B</div>
</div>

// délégation d'événements + repli si document$ n'est pas (encore) défini
function initTabs() {
  const tabs = document.querySelector('.tabs');
  if (!tabs) return;
  tabs.addEventListener('click', e => {
    const btn = e.target.closest('[data-tab]');
    if (!btn) return;
    tabs.querySelectorAll('div').forEach(p => p.hidden = true);
    document.getElementById(btn.dataset.tab).hidden = false;
  });
}

if (typeof document$ !== 'undefined') {
  document$.subscribe(initTabs);
} else {
  document.addEventListener('DOMContentLoaded', initTabs);
}

✦ Plus souple : on peut ajouter des onglets, des animations, mémoriser le choix en localStorage… mais nécessite JavaScript actif. Un script inline (sans src) s'exécute immédiatement, avant que le bundle defer de Material n'ait défini document$ — d'où le test typeof et le repli sur DOMContentLoaded.

Réaliser des Onglets

Démonstration des onglets MkDocs Material et alternatives