11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher/Masquer un div

Bonjour,
C'est pourtant tres basique mais je ne suis pas encore parvenu
à trouver un script qui permet d'afficher/masquer un div simultanemment.

Celui-ci ne fonctionne pas!

/*function toggle (idDetail) {
	var style = document.getElementById(idDetail).style;
	style.display = (style.display == "none") ? "" : "none";
	}*/


et le html


<h5><a href="#" onclick="toggle('group1')">Officers</a></h5>
<ul id="group1">
<li><input type="checkbox" name="target_group" value="" />96  Full Time (2008) (Student)</li>
<li><input type="checkbox" name="target_group" value="" />85  Full Time (2007) (Student)</li>
<li><input type="checkbox" name="target_group" value="" />6  Full Time (2006) (Alumni)</li>
<li><input type="checkbox" name="target_group" value="" />3  Full Time (2005) (Alumni)</li>
<li><input type="checkbox" name="target_group" value="" />3  Full Time (2004) (Alumni) </li>
</ul>


Quelqu'un aurait la solution?
Modifié par Hermann (08 Nov 2006 - 22:40)
rajoute un style... Smiley murf 

<ul id="group1" style="">


EDIT : et décommente ta fonction JS.
Modifié par Malcolm (09 Nov 2006 - 09:37)
Salut,
Malcolm a écrit :
rajoute un style... Smiley murf 

<ul id="group1" style="">
Euh, il y a peut-être moyen d'éviter ça quand même. Smiley eek

Pour ma part, dans ces cas-là, plutôt que de toucher directement au style, j'ajoute et j'enlève une classe "hidden" sur l'élement, et j'écris dans ma feuille de styles :
.hidden {display: none;}
Ca a l'avantage de fonctionner à coup sûr et de séparer le comportement et la présentation.
Bonjour,
Merci à vous. Désolé mais j'avais oublié de vous dire qu'il y avait déja un
display:none déclaré dans le <head>, je l'ai converti en style en ligne
et maintenant ça fonctionne!
Par contre j'aimerais pouvoir conserver les propriétés d'affichage dans une
css externe.
Modifié par Hermann (09 Nov 2006 - 16:30)
Bonjour,Dans ce cas, tu peut utiliser la fonction getStyle citée dans un post précédent:

// Récupérer la valeur d'une propriété CSS d'un élément id
function getStyle(elt,pro)
{
var element = document.getElementById(elt);
if (window.getComputedStyle) // Mozilla Firefox & cie
	{
	var propriete = window.getComputedStyle(element,null).getPropertyValue(pro);
	}
else if (element.currentStyle) // Microsoft Internet Explorer
	{
	// Formatage (IE) de la propriété CSS
	while (pro.indexOf('-') != -1) 
		{
		var lettresuivtiret = pro.charAt(pro.indexOf('-')+1);
		pro = pro.replace(/-\S{1}/,lettresuivtiret.toUpperCase());
		}
	var propriete = eval('element.currentStyle.'+pro);
	}
return propriete;
}

function toggle (idDetail) {
	var style = document.getElementById(idDetail).style;
	if(getStyle(idDetail,'display')=="none")style.display="block";
	else style.display = "none"  ;
	}

Modifié par chmel (12 Nov 2006 - 10:02)
chmel a écrit :
Bonjour,Dans ce cas, tu peut utiliser la fonction getStyle citée dans un post précédent:

// Récupérer la valeur d'une propriété CSS d'un élément id
function getStyle(elt,pro)
{
var element = document.getElementById(elt);
if (window.getComputedStyle) // Mozilla Firefox & cie
	{
	var propriete = window.getComputedStyle(element,null).getPropertyValue(pro);
	}
else if (element.currentStyle) // Microsoft Internet Explorer
	{
	// Formatage (IE) de la propriété CSS
	while (pro.indexOf('-') != -1) 
		{
		var lettresuivtiret = pro.charAt(pro.indexOf('-')+1);
		pro = pro.replace(/-\S{1}/,lettresuivtiret.toUpperCase());
		}
	var propriete = eval('element.currentStyle.'+pro);
	}
return propriete;
}

function toggle (idDetail) {
	var style = document.getElementById(idDetail).style;
	if(getStyle(idDetail,'display')=="none")style.display="block";
	else style.display = "none"  ;
	}
Je trouve que ça fait beaucoup de code pour ne pas faire grand chose.

Je maintiens mon choix d'une classe...
Je suis d'accord avec toi, mais ce n'est pas ce qu'avait retenu Hermann dans sa dernière réponse.

Je vois bien comment modifier le code d'Hermann suivant tes indications :
function toggle (idDetail) {
	var el = document.getElementById(idDetail);
	if(el.className=="hidden")el.className="";
	else el.className="hidden" ;
	}
, mais pour externaliser "onclick , tu fais comment ?
chmel a écrit :
mais pour externaliser "onclick , tu fais comment ?
Dans ce cas-là, le mieux est de générer le lien à la volée en Javascript, je pense.
Sujet clos
Aller à