<div<input idtype="status-debugradio" stylename="margin: 10px 0; padding: 10px; border: 1px dashed #3474FF; text-align: center;">
État : En attente de clic...
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const statusDiv = document.getElementById('status-debug');
statusDiv.innerHTML = "JS Actif - Prêt à cliquer";
statusDiv.style.backgroundColor = "#e0ffe0"; // Vert pâle si chargé
const menu = document.getElementById('faq-menu');
menu.addEventListener('click', function(e) {tabs" id="tab1" checked class="tab-input">
<input type="radio" name="tabs" id="tab2" class="tab-input">
<input type="radio" name="tabs" id="tab3" class="tab-input">
<div class="faq-portal-container">
<aside class="faq-sidebar-menu">
<label for="tab1" class="faq-link">Mon terminal</label>
<label for="tab2" class="faq-link">Mon espace client</label>
<label for="tab3" class="faq-link">Ma télécollecte</label>
</aside>
<main class="faq-content-panes">
<section id="content1" class="faq-pane">Contenu Terminal</section>
const target = e.target.closest('.faq-link');<section id="content2" class="faq-pane">Contenu Client</section>
if (target) { <section id="content3" class="faq-pane">Contenu Télécollecte</section>
</main>
</div>
<style>
/* On cache les boutons radio */
.tab-input { statusDiv.innerHTML = "Clic reçu sur : " + target.innerText;
statusDiv.style.backgroundColor = "#fff0f0"; // Rouge pâle pour confirmer le clic
// Le reste de ta logique...
}
});
});
</script>display: none; }
/* Par défaut, on cache les panneaux */
.faq-pane { display: none; }
/* LA MAGIE : Quand on clique sur le label, le radio devient "checked" et on affiche le contenu */
#tab1:checked ~ .faq-portal-container #content1,
#tab2:checked ~ .faq-portal-container #content2,
#tab3:checked ~ .faq-portal-container #content3 {
display: block !important;
}
/* Style de sélection des labels */
#tab1:checked ~ .faq-portal-container label[for="tab1"],
#tab2:checked ~ .faq-portal-container label[for="tab2"],
#tab3:checked ~ .faq-portal-container label[for="tab3"] {
background: #3474FF !important;
color: #fff !important;
}
/* ... Ajoute ici ton CSS existant pour .faq-link et .faq-portal-container ... */
</style> |