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";
}

**laurentSc** · 25/10/2013, 16h07

Supposons (comme c'est le cas dans l'exemple que j'ai pris) que les 2 items sont alignés verticalement (ou sont l'un sous l'autre).
En fait, mon idée est de faire la chose suivante (mieux vaut un petit dessin qu'une confuse explication) :

item 1----------------------item 3
bla bla 1-1----------------bla bla 3-1
bla bla 1-2----------------bla-bla 3-2
bla bla 1-3----------------bla-bla 3-3
bouton "see more"-----bouton "see more"

item 2----------------------item 4
bla bla 2-1----------------bla-bla 4-1
bla bla 2-2----------------bla-bla 4-2
bla bla 2-3----------------bla-bla 4-3
bouton "see more"-----bouton "see more"

et si je clique sur le bouton "see more" de l'item 1, on a

item 1----------------------item 3
bla bla 1-1----------------bla bla 3-1
bla bla 1-2----------------bla-bla 3-2
bla bla 1-3----------------bla-bla 3-3
bla bla 1-4----------------bouton "see more"
bla bla 1-5
bla bla 1-6----------------item 4
bla bla 1-7----------------bla-bla 4-1
-----------------------------bla-bla 4-2
bouton "hide-------------bla-bla 4-3
-----------------------------bouton "see more"

(les tirets, c'est des espaces, mais l'éditeur ne permet pas d'en mettre plusieurs). Vu la longueur de l'afichage de l'item 1, l'item 2 se trouve masqué pour éviter un décalage.

Invité · 25/10/2013, 16h10

Mettre les "boites" en position:absolute réglerait le problème en 2 coups de cuillère à pot.

Et ce n'est plus sur le display qu'il faut jouer, mais sur le height (pour afficher 3 lignes ou tout) et overflow (auto/hidden).

**SpaceFrog** · 25/10/2013, 16h16

un petit coup de hide et show ou slide voire slideToggle en jquery et on n'en parle plus ...

Invité · 25/10/2013, 16h25

Ou on n'en parle plus.

Tout court.

**laurentSc** · 25/10/2013, 16h53

Envoyé par jreaux62

Ou on n'en parle plus.

Tout court.

Tout-à-fait...quand ce sera résolu ! Et ça ne l'est pour le moment. Je préfère une solution sans jquery et je suppose que la gestion de height et overflow, il faudrait la mettre dans la fonction expand, mais comment ?

Voilà pour le moment mon code :

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
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";
 }
function init() {
    expand("test1", window.location.hash==="#expanded");
    expand("test2", window.location.hash==="#expanded");
}

Code html :

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

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

**NoSmoking** · 25/10/2013, 16h58

Bonjour,

Envoyé par jreaux62

Ou on n'en parle plus.

Tout court.

si si, l'impératrice en parle beaucoup
- http://www.developpez.net/forums/d13...riere-refresh/
- http://www.developpez.net/forums/d13...quer-decalage/
... et donc dans cette discussion...

il serait bon peut être de synthétiser.

Invité · 25/10/2013, 17h18

Laurent,
tu mobilises à toi seul une dizaine de forumeurs/modérateurs avec tes discussions.

Or, dans ce cas, tu es parti sur une mauvaise piste.
Car comme d'habitude, tu n'as pas pris la peine D'EXPLIQUER DES LE DEPART l'OBJECTIF.
On aurait pu t'orienter vers une solution adéquate plus tôt !

Ce que tu veux faire ressemble à un menu très "classique", sauf qu'on affiche 3 lignes de chaque "sous-menu" par défaut.

D'où ma proposition de solution.

**laurentSc** · 25/10/2013, 17h19

C'est exact que je parle du même sujet dans d'autres discussions (depuis un moment) ; pour faire le ménage, je ne laisse plus que celle-ci ouverte.

**laurentSc** · 25/10/2013, 17h38

Désolé de faire perdre du temps à beaucoup de monde.

Pour l'objectif, ce que javais dit à 16h07, ça va ?

Ta proposition m'intéresse et effectivement, mon besoin ressemble à un menu un peu spécial et doit donc pouvoir se résoudre en CSS. Mon idée est de conserver la fonction expand pour garder la gestion du hash, mais je ne vois pas comment y insérer ta proposition ; d'où ma question de 16h53...

Invité · 25/10/2013, 17h46

J'essaierai de pondre un code... quand j'aurais le temps

**askywhale** · 28/10/2013, 18h49

J'arrive à ça (ça marche, mais c'est pas terrible : ça ferme tous les autres div, il faudrait plutôt chercher par classe, emplacement...)

Code :

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
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";
}
function expandAndInflateOthers(id) {
	var items = document.getElementsByTagName("div")
	for(var i=0;i<items.length;i++)
		expand(items[i].id, id==items[i].id)
}
function init() {
    expand("test1", window.location.hash==="#expanded");
    expand("test2", window.location.hash==="#expanded");
}

Code html :

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

1
2
3
4
5
6
7
8
<a id="test1Bt" href="#" onclick="expandAndInflateOthers('test1');">Ouvrir</a>
  <div id="test1">
      test1<br />
  </div> <br/>
  <a id="test2Bt" href="#" onclick="expandAndInflateOthers('test2');">Ouvrir</a>
  <div id="test2">
      test2<br/>
  </div>

**laurentSc** · 28/10/2013, 21h53

Ca marche...mais ça ne répond pas au besoin ; par rapport à ce qui est fait, voilà le besoin :

- quand on clique sur le 1er "ouvrir", ça devrait développer le div correspondant en masquant le 2e "ouvrir" (et pas décaler celui-ci), et le "fermer" devrait aussi être cliquable, et quand on clique sur un bouton, ça ne devrait changer pas l'état de l'autre (ils doivent rester indépendants).
-à l'ouverture de la page, je ne voudrais pas avoir les 2 boutons "ouvrir" avec les 2 div déjà ouverts, mais les 2 boutons pareils avec les div fermés.

Enfin, merci de commenter le code que je puisse en saisir la logique.

EDIT de 22h09 : Le conseil de jreaux62 le 25/10 à 16h10 me parle et sinon, pour la première fois le JSFiddle de SylvainPV du 25/10 15h36 veut bien s'ouvrir chez moi mais il y a un défaut commun : quand on active un "ouvrir", ça décale les suivants au lieu de les masquer.

**SylvainPV** · 29/10/2013, 14h40

Et comme ça ? http://jsfiddle.net/nbSHt/3/

J'ai juste rajouté position:absolute au contenu déroulé des menus pour qu'ils s'affichent par dessus le contenu existant. Personnellement je préfère ma première approche question ergonomie.

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

JavaScript

Discussions similaires

Partager

Partager