il y a aussi la possibilité de se servir de pseudo élément sur les labels pour simuler le visuel d'un bouton radio (customisé ou copié a peu prés) afin de renvoyer et cacher les input plus haut dans la structure pour que les éléments à afficher ou pas soit dans un conteneur frère aux inputs , exemple possible :
https://codepen.io/gc-nomade/pen/oNjXZeo
Codes de la démo :
html avec les input relevé d'un niveau :
<input type="radio" name="notes-display" value="matiere" id="notes-display_matiere" checked>
<input type="radio" name="notes-display" value="module" id="notes-display_module">
<div class="sub-menu">
<div class="content-container">
<div class="menu">
<label for="notes-display_matiere">Par matière</label>
<label for="notes-display_module">Par module</label>
</div>
</div>
</div>
<div class="content">
<div class="content-container">
<div class="tables-notes">
<div class="table" id="table1">
<p>Table 1</p>
</div>
<div class="table" id="table2">
<p>Table 2</p>
</div>
</diV>
</div>
</div>
et le css reproduisant un simili bouton radio a partir de son label et affichant ou non, tel ou tel element (enfant d'un frere des input):
[name="notes-display"],
#table1,
#table2 {
display: none;
}
label::before {
content: "";
display: inline-block;
padding: 0.225em;
margin: 0 0.2em;
border-radius: 50%;
border: solid 1px rgb(215, 219, 222);
box-shadow: 0 0 2px, inset 0 0 2px, inset 1px 1px 2px rgb(193, 197, 203);
}
#notes-display_matiere:checked
~ .sub-menu
.content-container
[for="notes-display_matiere"]::before,
#notes-display_module:checked
~ .sub-menu
.content-container
[for="notes-display_module"]::before {
box-shadow: 0 0 2px, inset 0 0 1px 1px rgb(42, 69, 89),
inset -2px -2px 2px rgb(21, 145, 204);
}
#notes-display_matiere:checked ~ .content .content-container #table1,
#notes-display_module:checked ~ .content .content-container #table2 {
display: block;
}
Modifié par gcyrillus (12 Apr 2020 - 21:50)
