28106 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai deux input, et j'aimerais afficher une div correspondant à l'input 1 et une autre div correspondant à l'input 2, et afficher une div ou l''autre selon l'input sélectionné. Mais je ne sais pas comment sélectionner les div lorsqu'un input est sélectionné (en CSS).

Voir le CodePen : https://codepen.io/Titouan79/pen/xxwbOvq

Merci d'avance Smiley smile
Modifié par Titouan79 (10 Apr 2020 - 19:06)
gcyrillus a écrit :
Bonjour,

ce n'est pas très clair, où (quels) sont les div à afficher ou pas ?

Cdt

Bonjour, je voudrais afficher la div "table1" lorsque l'input de value "matiere" est sélectionné, et la div "table2" lorsque l'input "module" est sélectionné.
Merci beaucoup à vous deux Smiley smile
Mais est-il possible de faire la même chose en CSS, avec input:checked par exemple ?
Administrateur
Titouan79 a écrit :
Mais est-il possible de faire la même chose en CSS, avec input:checked par exemple ?

Hello,

Oui c'est possible mais il faut que l'input (ou le label) soit dans la même "fratrie" que le div à cibler.
Tu as un exemple concret sur le site https://schnaps.it/ : les boutons "version mélanchée", "version paragraphe", etc. sont des input checkbox.
Raphael a écrit :

Hello,

Oui c'est possible mais il faut que l'input (ou le label) soit dans la même "fratrie" que le div à cibler.
Tu as un exemple concret sur le site https://schnaps.it/ : les boutons "version mélanchée", "version paragraphe", etc. sont des input checkbox.

Ok, si j'ai bien compris, selon mon HTML actuel, ce n'est pas possible...
Administrateur
Titouan79 a écrit :

Ok, si j'ai bien compris, selon mon HTML actuel, ce n'est pas possible...

Pas en CSS pur, non.
Jean-Pierre-Bruneau a écrit :
Bonjour, c'est comme cela qu'il faut faire Smiley cligne

<!DOCTYPE html> 
<html lang='fr'> 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Model type jplyne </title>
<meta name="keywords" content="Model type jplyne" />
<meta name="description" content="Model type jplyne" />

<style>
.table1,
.table2
{
  border:solid 1px #000000; border-radius:30px;text-align:center;
}
</style>
<script>
function leclic(xx)
{
if (xx==1) {  
var x = document.getElementById('table1');
x.style.display = 'none';
var y = document.getElementById('table2');
y.style.display = 'block';
}  
if (xx==2) {  
var x = document.getElementById('table2');
x.style.display = 'none';
var y = document.getElementById('table1');
y.style.display = 'block';
}  

}  
</script>
</head>
<body>
<DIV class="sub-menu">
  <DIV class="content-container">
    <DIV class="menu">
      <input type="radio" onclick="leclic(1)" name="notes-display" value="matiere" id="notes-display_matiere" class="notes-display_matiere">
      <label for="notes-display_matiere">Par matière</label>
      <input type="radio" onclick="leclic(2)" name="notes-display" value="module" id="notes-display_module" class="notes-display_module">
      <label for="notes-display_module">Par module</label>
    </DIV>
  </DIV>
</DIV>
<DIV class="content">
  <DIV class="content-container">
    <DIV class="tables-notes">
      <DIV class="table1"  id="table1">
        <p>Table 1</p>
      </DIV>
      <DIV class="table2"  id="table2">
        <p>Table 2</p>
      </DIV>
    </DIV>
  </DIV>
</DIV>
</body>
</html>

Effectivement, ça marche bien, mais quand on actualise la page, la dernière case cochée reste cochée, mais le contenu qui s'affiche et toujours la "table 1". Il attend juste le clic pour afficher la div correspondante. Si vous pouviez compléter votre code, ce serait cool Smiley smile
Modifié par Titouan79 (12 Apr 2020 - 19:18)
Modérateur
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)
Jean-Pierre-Bruneau a écrit :

Oui script mal placé !! j'ai réédité le message récupères le nouveau code !! Smiley ohwell

gcyrillus Trop bien ta version, j'aurais du y penser puisque c'est comme cela que je gères mes menus portables sur mes sites !!

Merci ! Juste une dernière chose, lorsque l'on actualise la page, tout disparaît. Il faudrait que le contenu de la dernière case cochée reste affiché lorsque l'on actualise.
Modérateur
Titouan79 a écrit :

Merci ! Juste une dernière chose, lorsque l'on actualise la page, tout disparaît. Il faudrait que le contenu de la dernière case cochée reste affiché lorsque l'on actualise.


Pour le coup, il n'y a que JavaScript pour gérer l'ensemble via cookies/localstorage pour garder en mémoire la dernière option cochée.

Utilises tu déjà l'un ou l'autre sur tes pages ?
Modifié par gcyrillus (13 Apr 2020 - 15:53)
gcyrillus a écrit :


Pour le coup, il n'y a que JavaScript pour gérer l'ensemble via cookies/localstorage pour garder en mémoire la dernière option cochée.

Utilises tu déjà l'un ou l'autre sur tes pages ?

Pas pour le moment, ducoup comment faire avec JS ?
Modérateur
Avec localStorage et en reprenant le code de Jean-Pierre Bruneau, tu pourrais faire quelque chose comme ceci en actualisant l'input checked et le display des divs correspondants.

let x = document.getElementById("table1");
let y = document.getElementById("table2");
function leclic(xx) {
  if (xx == 1) {
    y.style.display = "none";
    x.style.display = "block";
    localStorage.setItem("choix", "table1");
  }
  if (xx == 2) {
    x.style.display = "none";
    y.style.display = "block";
    localStorage.setItem("choix", "table2");
  }
}

window.onload = function () {  
  x.style.display = "none";
  y.style.display = "none";
  let table = localStorage.getItem("choix");
  if (!table  || table == "table1") {
    let choice = document.querySelector("#notes-display_matiere");
    choice.setAttribute("checked", "");
    x.style.display = "block";
  } else {
    let choice = document.querySelector("#notes-display_module");
    choice.setAttribute("checked", "");
    y.style.display = "block";
  }
};


pen : https://codepen.io/gc-nomade/pen/OJyVdOV
Modifié par gcyrillus (13 Apr 2020 - 18:07)