Tout réafficher après suppression de "étirer"

**laurentSc** · 25/10/2013, 12h12

Bonjour,

j'ai un code qui permet d'afficher plus d'information ; dans cet exemple, il y a 2 items, et si on étire le premier cela masque le deuxième (bien). Par contre, si on referme l'étirement du premier, le deuxième reste masqué au lieu de réapparaître ; il y a donc un bug dans mon code, mais je ne vois pas :

Code js :

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
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state : au départ, pas de hash
  }
 
  Item.style.display = expanded ? "block" : "none"; 
  document.getElementById(id+'Bt').href = expanded ? "#expanded" : "#";
  document.getElementById(id+'Bt').innerHTML = expanded ? "Fermer" : "Ouvrir";
  if (document.getElementById(id+'Bt').innerHTML=="Fermer") document.getElementById("test2Bt").style.display="block";//essai non concluant de réaffichage
}
function init() {
    expand("test1", window.location.hash==="#expanded");
	expand("test2", window.location.hash==="#expanded");
}
 
function test1(){
expand('test1');
document.getElementById("test2Bt").style.display="none";//masquer le 2e item
 
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<body onload="init();">
  <a id="test1Bt" href="#" onclick="test1();">Ouvrir</a>
  <div id="test1">
      test1<br />
  </div> <br/>
  <a id="test2Bt" href="#" onclick="expand('test2');">Ouvrir</a>
  <div id="test2">
      test2<br/>
  </div>
</body>

**SpaceFrog** · 25/10/2013, 12h36

inhibe déja tes href ...

**laurentSc** · 25/10/2013, 13h42

qu'est-ce que tu veux dire ?

**SylvainPV** · 25/10/2013, 13h47

Je vois bien que tu caches le deuxième menu dans la fonction init1, mais où est-ce que tu le fais réapparaître exactement ? Nulle part, donc aucune chance que ça fonctionne. Il faudrait alterner la propriété style.display entre block et none comme tu le fais dans la fonction expand.

**laurentSc** · 25/10/2013, 14h04

Si, dans mon essai, j'essaye de faire réapparaître le deuxième menu en mettant

Code :

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

 if (document.getElementById(id+'Bt').innerHTML=="Fermer") document.getElementById("test2Bt").style.display="block";//essai non concluant de réaffichage

dans la fonction expand...
Et ça

Il faudrait alterner la propriété style.display entre block et none comme tu le fais dans la fonction expand

à quel endroit il faudrait le faire ?

Invité · 25/10/2013, 15h05

Bonjour,
pourquoi vouloir absolument masquer le 2ème item ?
Ce n'est pas une bonne pratique...

Où est l'intérêt de tout ça ?
Explique-nous.
Je suis sûr qu'on peut trouver une meilleure (et plus simple) solution.

Sinon, en JavaScript, regarde aussi du coté de .getElementsByClassName().
Ca te permettrait de pouvoir ajouter autant de "boites", sans revenir à chaque fois sur le forum demander comment faire...

**SylvainPV** · 25/10/2013, 15h36

Je ne comprends pas ta logique vraiment, afficher le bloc test2 si le texte du bouton cliqué est Fermer ?

Tu ne nous a pas dit clairement quel était le comportement attendu pour les menus, mais je vais supposer qu'il faut replier tous les autres quand on en ouvre un. Voilà un code qui se passe des IDs et fonctionne pour un nombre quelconque d'éléments. J'ai utilisé jQuery pour gagner du temps, mais on peut parfaitement s'en passer :

http://jsfiddle.net/nbSHt/2/

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
<body>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test1
  </div>
  </section>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test2
  </div>
  </section>
  <section class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test3
  </div>
  </section>
</body>

Code js :

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
function expand($panelToOpen){
  $(".panel").not($panelToOpen).removeClass("expanded");
  $panelToOpen.toggleClass("expanded");  
}
 
function init() {
    var panelToExpand = 0; //déplie le premier panel par défaut
    var match = window.location.hash.match(/expanded=(\d+)/);
    if(match != null && match[1] != null){
        panelToExpand = parseInt(match[1]);      
    }  
    expand( $(".panel").eq(panelToExpand) );
 
    $(".panel").each(function(p){
        $(this).find('.panel-toggle-btn').on('click', function(e){
            e.preventDefault();
            expand( $(this).closest('.panel') );
            window.location.hash = "expanded="+p;
        });
    });
};
 
window.onload = init;

Code css :

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
.panel .contenu {
    display:none;    
}
 
.panel.expanded .contenu {
    display:block;
    background: #CCC;
}
 
.panel .panel-toggle-btn:before {
    content:"Ouvrir";
}
 
.panel.expanded .panel-toggle-btn:before {
    content:"Fermer";
}

Tout réafficher après suppression de "étirer"

JavaScript

Vue hybride

Discussions similaires

Partager

Partager