Fonction Afficher/Masquer des div

Version imprimable

Bonjour,

Je m'arrache un peu les cheveux là-dessus:

Il y a plusieurs div de style visibility='hidden';
et plusieurs bouttons avec

Code:

onclick="show_edit('id_de_la_div')"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function show_edit(what) { 
	// Masquer toutes les div > OK
	  var elems = document.getElementsByClassName('edit');
	  for(var i = 0; i < elems.length; i++) {
            elems[i].style.visibility='hidden';
         }
	// Afficher la div en question >  No :calim2:
	the_element=document.getElementById(what);
	if (the_element.style.visibility=='visible') 
		{
 		  the_element.style.visibility='hidden';console.log('1');
		} 
	else {
		the_element.style.visibility='visible';console.log('2');
		}
 
	console.log(what+' > '+the_element.style.visibility);
}

Ben ca reste sur 'visible'.
Auriez-vous une idée ?
Merci

22/06/2019, 14h54
ProgElecT

Salut

Inserts console.log('the_element.style.visibility >>> ' + the_element.style.visibility)avant ta ligne if.
Lances ton projet, ouvre l'outil de développement de ton navigateur pour vérifier l'état de visibility .
22/06/2019, 15h58
Invité

Bonjour,

1- Merci de montrer un code COMPLET * , qu'on puisse TESTER.
* code nécessaire et suffisant : JS + HTML + CSS associé.

2- D'autre part, as-tu fait une recherche avant ??
(ce ne sont pas les discussions qui manquent sur ce sujet !)
:recherch: "afficher/masquer div JS"

3- En l'occurrence, puisque tu passes tous les div en visibility:hidden (avec la boucle), normal que le div cliqué soit toujours visible.
Du coup, ton test if(...) ne sert à rien.
22/06/2019, 21h29
feelwatt

Bonsoir,
D'abord, merci de vos réponses.
Ensuite, désolé, de ma bêtise.
@jreaux62

- J'avais choisi de ne pas mettre le code complet,

pensant que ca aurait été lourd à lire et à décrypter.
- C'est vrai, je n'ai pas fais de recherche, mais je ne voyais pas comment la formuler

(aussi de créer des post à tire-la-rigot, ca doit surcharger inutilement developpez.net, je suis d'accord :oops:)
.

Citation:

- puisque tu passes tous les div en visibility:hidden (avec la boucle), normal que le div cliqué soit toujours visible.

Et oui, c'est idiot
@ ProgElecT

Je voyais bien ca dans la console (c'est mon cpu perso, ne comprenait pas)

C'est un bug cognitif.
Il fallait que je passe par une simple réflexion:

1- Masquer tous les div
2- (Re-)Donner à chaque bouton la fonction show
3- Donner au bouton cliqué la fonction hide
4- Afficher la div

J'ai fait ça (réfléchir 8O)
donc ça fonctionne.

Désolé
Bonne soirée ou journée.

PS: je pourrais modifier la citation de Mark Twain en:
"Ils n'y avaient pas réfléchi, alors ils ne l'ont pas fait."

Bonjour,

Voici une solution : https://codepen.io/jreaux62/pen/RzpzKP

Code:

1
2
3
4
5
6
7
8
9
<button type="button" class="btn-edit" data-id="div-1">1</button>
<button type="button" class="btn-edit" data-id="div-2">2</button>
<button type="button" class="btn-edit" data-id="div-3">3</button>
<button type="button" class="btn-edit" data-id="div-4">4</button>
 
<div class="edit" id="div-1">contenu 1</div>
<div class="edit" id="div-2">contenu 2</div>
<div class="edit" id="div-3">contenu 3</div>
<div class="edit" id="div-4">contenu 4</div>

Code:

1
2
.btn-edit { display:inline-block; }
.edit { visibility:hidden; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'use strict';
const btns = Array.from(document.querySelectorAll('.btn-edit'));
const elts = Array.from(document.querySelectorAll('.edit'));
btns.forEach( function(btn) {
  btn.addEventListener('click', function() {
    let this_id = btn.dataset.id;
    // Masquer toutes les autres div + toggle celle cliquée
    elts.forEach( function(elt) {
      elt.style.visibility = (   
        ( elt.id != this_id ) // autres div
        || ( elt.id == this_id && elt.style.visibility == 'visible' ) // celle cliquée visible ?
      )? 'hidden' : 'visible';
    });
  });
});

Variante :
au lieu de visibility 'hidden' / 'visible', on peut utiliser display 'none' / 'block'.
(je vous laisse TESTER la différence à l'affichage...)

Salut, jreaux62
J'avais vu le message mais pas le temps d'y répondre.
Mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- bouton 1 -->
<i class="fa fa-pencil awesome" onclick="show_edit('edit_1')"></i>
<!-- div 1 -->
<div id="edit_1" class="edit"> 
	<p>Texte 1</p>
	<textarea name="text_1">Texte 1</textarea>
</div>
<!-- bouton 2 -->
<i class="fa fa-pencil awesome" onclick="show_edit('edit_2')"></i>
<!-- div 2 -->
<div id="edit_2" class="edit"> 
	<p>Texte 2</p>
	<textarea name="text_2">Texte 2</textarea>
</div>

Code:

1
2
3
.edit {
		visibility: hidden;
	}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function show_edit(what) { 
	// Masquer tout
	var elems = document.getElementsByClassName('edit');
	for(var i = 0; i < elems.length; i++) {
		elems[i].style.visibility='hidden';
		}
	// 'onClick',"show_edit" pour tout les boutons
	var elems = document.getElementsByClassName('awesome');
	for(var i = 0; i < elems.length; i++) {
		var name_of_div=elems[i].id.replace('_fa','');
		elems[i].setAttribute('onClick',"show_edit('"+name_of_div+"');");
		console.log(name_of_div);
		}
	// Montrer le div en question
		document.getElementById(what).style.visibility='visible';
	// Changer le onclick
		document.getElementById(what+'_fa').setAttribute('onClick',"hide_edit('"+what+"');");
}
function hide_edit(what) {
	// Masquer le div en question
		document.getElementById(what).style.visibility='hidden';
	// Changer le onclick
		document.getElementById(what+'_fa').setAttribute('onClick',"show_edit('"+what+"');");
}

C'est bien moins poussé que le tien.

Et je suis totalement d'accord avec l'entre-aide et developpez.net
Merci des réponses.