26951 sujets

CSS et mise en forme, CSS3

Bonjour,
Exactement, mais serait-il possible de les avoir tous rétractés dès le début, et que le fait d'en déplier une ne replie pas une autre ?
Modifié par Dayka (09 Dec 2019 - 16:42)
allan00958 a écrit :
Re,

Oui, tout est possible en javascript Smiley cligne


Et c'est possible de le faire en CSS ?
Bonjour,
Oui, il y a des possibilités en CSS comme sur cet exemple :
https://jsbin.com/kobokaw/1/edit?html,css,output
où tu peux même conjuguer des ouvertures thématiques (ici: tous les chiens ou tous les chats) avec une ouverture/fermeture par clic direct sur la boite voulue grâce à l'utilisation d'un <imput> et de son <label> associé enrobant chaque élément.
Cela permet de se passer de JS, mais c'est vite lourd côté html.
A réserver pour les petits nombres d'éléments donc.
Il y a aussi un problème évoqué sur cet autre forum:
https://openclassrooms.com/forum/sujet/cacher-montrer-une-serie-de-div
où je proposais cet exemple simple:
<label for="chk1">
<input type="checkbox" name="menu" id="chk1">
<div class="partie-1">
	<h3>Titre A</h3>
  <p>Qu'est-ce que le Lorem Ipsum?
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.  </p>
</div>
</label>
<label for="chk2">
<input type="checkbox" name="menu" id="chk2">
<div class="partie-2">
  <h3>Titre B</h3>
	<p>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
</div>
</label>

CSS
input{display:none;}

div{
  border:5px ridge grey;
  width:250px;
  height:3rem;
  transition:1s;
  overflow:hidden;
}

input:checked ~ div {height:200px;}

https://jsbin.com/tekode/6/edit?html,css,output
Avec cette méthode CSS toutefois, on ne peut avoir d'effet de transition si on ne donne pas une longueur de boite définie: cela ne fonctionne pas avec height:auto;
Voir en ce cas la solution JS évoquée par Lamecarlate:
https://a11y.nicolas-hoffmann.net/accordion/
Modifié par Philiga (27 Dec 2019 - 12:45)