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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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>

25/10/2013, 12h36
SpaceFrog

inhibe déja tes href ...
25/10/2013, 13h42
laurentSc

qu'est-ce que tu veux dire ?
25/10/2013, 13h47
SylvainPV

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.
25/10/2013, 14h04
laurentSc

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

Code:

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

Citation:

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 ?
25/10/2013, 15h05
Invité

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...

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:

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:

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:

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

25/10/2013, 16h07
laurentSc

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) :

Citation:

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

Citation:

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.
25/10/2013, 16h10
Invité

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).
25/10/2013, 16h16
SpaceFrog

un petit coup de hide et show ou slide voire slideToggle en jquery et on n'en parle plus ...
25/10/2013, 16h25
Invité

Ou on n'en parle plus.

Tout court.

Citation:

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:

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:

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>

25/10/2013, 16h58
NoSmoking

Bonjour,

Citation:

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.
25/10/2013, 17h18
Invité

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.
25/10/2013, 17h19
laurentSc

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.
25/10/2013, 17h38
laurentSc

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...
25/10/2013, 17h46
Invité

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

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:

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:

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>

28/10/2013, 21h53
laurentSc

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.
29/10/2013, 14h40
SylvainPV

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.

Voir 40 message(s) de cette discussion en une page