Ouverture fermeture DIV dynamiquement

**zouetchou** · 27/02/2024, 10h00

Bonjour à tous,

après avoir testé l'ouverture/fermeture d'une via javascript (trop compliqué au final) je teste cela avec CSS ... voici mon code de test :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 
#voir {
        margin-top: 5px;
        padding: 10px;
        max-height : 0em;
        
        border: 0px solid;
        overflow: hidden;
        transition: all 5s;
}
 
#voir:target {
        max-height: 400 px;
        border: 1px solid;      
}
</style>
</head>
 
<body>
<br>
<h2>Page de test</h2>
<div><a id="open" href="#voir">Ouvrir...</a></div>
<div id="voir">
  <h1>contenu #3</h1> <p>Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the
    industry s standard dummy text ever since the 1500s,
    when an
    unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has
    survived
    not only five centuries, but also the leap
    into electronic typesetting, remaining essentially
    unchanged. It was popularised in the 1960s with the
    release of Letraset sheets containing Lorem Ipsum
    passages,
    and more recently with desktop publishing
    software like Aldus PageMaker including versions of
    Lorem
    Ipsum</p>
  <p>Lorem Ipsum is simply dummy text of the printing and
    typesetting industry. Lorem Ipsum has been the
    industry s standard dummy text ever since the 1500s,
    when an
    unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has
    survived
    not only five centuries, but also the leap
    into electronic typesetting, remaining essentially
    unchanged. It was popularised in the 1960s with the
    release of Letraset sheets containing Lorem Ipsum
    passages,
    and more recently with desktop publishing
    software like Aldus PageMaker including versions of
    Lorem
    Ipsum</p>
  <div><a id="close" href="#">Fermer...</a></div>
</div>
</body>

- L'ouverture fonctionne mais le problème est que si le contenu est plus important la cadre n'affichera pas tout car limité par la valeur max-height (notamment si la largeur de la fenêtre est réduite).
- La fermeture bizarrement fonctionne ... mais là je ne sais pas pourquoi (si quelqu'un a une explication)

Pour finir je souhaite, si possible, que pendant l'ouverture le lien 'Ouvrir...' disparaisse pour réapparaitre après la fermeture de la DIV.

Quelqu'un peut-il m'aider ?

**unanonyme** · 27/02/2024, 23h20

Il y a un problème de syntaxe dans max-height: 400 px;.

le cadre n'affichera pas tout car limité par la valeur max-height

Oui, c'est le problème d'une version js-less.
Comme on ne peut pas calculer la hauteur désirée,
on en est réduit à appliquer une hauteur à-peu-près, ou exagérément grosse.
Dans le premier cas on tombe sur des situations où la valeur de max-height est insuffisante,
dans le second cas on tape sur des animations qui semblent s'appliquer dans le vide.
Si vous utilisez max-height:10000000px; vous observerez un genre de délai inapproprié,
en fait l'animation s'applique sur une valeur qui n'est plus cohérente avec ce qui est affiché.

Pour finir je souhaite, si possible, que pendant l'ouverture le lien 'Ouvrir...' disparaisse pour réapparaitre après la fermeture de la DIV.

d'où la nécessité d'utiliser le pseudo sélecteur :has et de modifier votre structure HTML en conséquence.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="collapsable">
  <a href="#A" class="open">ouvrir</a>
  <a href="#" class="close">fermer</a>
  <div class="collapsable-content" id="A">
    <div style="background: black; height: 1500px; width: 1500px">
      exagérément grand..
    </div>
  </div>
</div>
 
<style>
  .collapsable {}
  .collapsable .close,
  .collapsable:has(:target) .open {
    display: none;
  }
  .collapsable:has(:target) .close {
    display: initial;
  }
  .collapsable .collapsable-content {
    max-height: 0px;
    overflow: hidden;
    transition: all 2s;
  }
  .collapsable:has(:target) .collapsable-content {
    max-height: 1000px;
    overflow: scroll;
  }
</style>

Ce qui était reproché dans le précédent thread c'était de réaliser l'animation en JS (la boucle de rappel d'incrémentation/décrémentation),
pas d'utiliser du JS.
Vous tanguez d'un bord à l'autre de l'extrémisme, un coup full-js, un coup full-css.
C'est très bien pour expérimenter les limites de chacun,
en pratique il faut nuancer l'usage de chacun pour tirer parti des capacités et avantages de chaque outils.

On pourra donc écrire un bidule comme ça et passer à autre chose,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div class="collapsable">
  <a href="#" class="open">ouvrir</a>
  <a href="#" class="close">fermer</a>
  <div class="collapsable-content" aria-hidden="true">
    <div style="background: black; height: 1500px; width: 1500px">
      exagérément grand..
    </div>
  </div>
</div>
 
<style>
  .collapsable {
  }
  .collapsable .close,
  .collapsable:has(.collapsable-content[aria-hidden="false"]) .open {
    display: none;
  }
  .collapsable:has(.collapsable-content[aria-hidden="false"]) .close {
    display: initial;
  }
  .collapsable .collapsable-content {
    height: 0px;
    overflow: hidden;
    transition: all 2s;
  }
  .collapsable .collapsable-content[aria-hidden="false"] {
    overflow: auto;
  }
  @media (max-width: 1000px) {
    .collapsable .collapsable-content {
      max-height: 150px;
    }
  }
</style>
 
<script>
  document.body.addEventListener("click", (ev) => {
    if (!ev.target.matches(".collapsable>a")) return;
    const parent = ev.target.parentNode;
    const container = parent.querySelector(".collapsable-content");
    let targetHeight = 0;
    if (container.ariaHidden === "true") {
      const content = container.querySelector("div");
      targetHeight = content.getBoundingClientRect().height;
      container.ariaHidden = "false";
    } else {
      container.ariaHidden = "true";
    }
    container.style.height = targetHeight + "px";
  });
</script>

Ouverture fermeture DIV dynamiquement

CSS

Discussions similaires

Partager

Partager