Créer une div "déroulante"

Bonsoir,
j'ai sur mon site plusieurs divs principales qui prennent beaucoup de place.
J'aimerais savoir si il est possible de les rendre plus petite sous forme de "barre" que je pourrais "dérouler" en cliquant sur un bouton.
J'ai trouvé que des menus ou listes déroulantes mais ce n'est pas ce que j'ai.
voici un petit exemple de ce que j'aimerais: https://docs.google.com/document/d/1N-fB3c0EJjSUrixfYrpky_6qEjQL-6S6xr4orjNVI-c/edit?usp=sharing

Hello,

Quelque chose comme ça: https://jqueryui.com/accordion/ ?

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)

Re,

Oui, tout est possible en javascript

allan00958 a écrit :
Re,

Oui, tout est possible en javascript

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)