Salut,
nonoteam a écrit :
Edit: Sinon je suis en xhtm 1.1
Raison de plus pour ne pas te servir de l'attribut name sur ta balise form... C'est invalide...
Par ailleurs, XHTML1.1 ne te sert, presque à coup sûr, à rien. Tu devrais lire
ce billet.
Bon, vu qu'apparemment, tu veux pouvoir te servir de ce script quelquesoit l'élément, ça se complexifie un peu...
Du coup, je t'ai fait le script...
Tu n'as plus besoin que de mettre une classe CSS sur l'élément que tu souhaites contrôler... (il n'est plus nécessaire de préciser ce que c'est)
Si t'as besoin d'explications, n'hésite pas... Je me suis servi volontairement des gestionnaires type DOM-0 histoire de ne pas compliquer d'avantage parce qu'à mon avis, tu vas déjà avoir suffisamment de mal comme ça...
Un conseil : Penche-toi sérieusement sur le script et essaye malgré tout de le comprendre...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">/*<!CDATA[*/
@media screen, projection
{
.cache { display: none; }
}
/*]]>*/</style>
<script type="text/javascript">//<![CDATA[
try {
var oO =
{
aCSS: [],
CSS: 'test', // Si un élément comporte cette classe, on lui affecte la classe définit ci-après (Display) et on crée un lien de contrôle
Display: 'cache',
_fastLoadEvent: function(func)
{
if(document.addEventListener) document.addEventListener('DOMContentLoaded', func, false);
/*@cc_on @*/
/*@if(@_win32) document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
var script = document.getElementById('__ie_onload');
script.onreadystatechange = function()
{
if(this.readyState === 'complete') func();
};
/*@end @*/
if(/WebKit/i.test(navigator.userAgent) && /loaded|complete/.test(document.readyState)) func();
},
_arrayPush: function()
{
var iI = arguments.length - 1;
for (; iI >= 0; iI--)
this[this.length] = arguments[iI];
return this.length;
},
_typeElem: function(oElem)
{
return oElem.nodeType === 1 ? true : false;
},
_haveChild: function(oElem)
{
return oElem.childNodes.length > 0 ? true : false;
},
_haveClass: function(oElem, sClass)
{
return oElem.className === sClass ? true : false;
},
_madeTab: function(aElem)
{
var iI = aElem.length - 1;
for(; iI >= 0; iI--)
if(oO._typeElem(aElem[iI]) && oO._haveClass(aElem[iI], oO.CSS))
oO.aCSS.push(aElem[iI]);
else if(oO._typeElem(aElem[iI]) && oO._haveChild(aElem[iI]))
oO._madeTab(aElem[iI].childNodes);
},
_display: function()
{
if(this.nextSibling.className === oO.Display)
{
this.nextSibling.className = oO.CSS;
this.href = '#cacher';
this.firstChild.src = 'moins.gif';
this.firstChild.alt = '-';
}
else
{
this.nextSibling.className = oO.Display;
this.href = '#montrer';
this.firstChild.src = 'plus.gif';
this.firstChild.alt = '+';
}
return false;
},
_init: function()
{
if(!oO._haveChild(document.body)) return;
var aBodyChilds = document.body.childNodes;
oO._madeTab(aBodyChilds);
if(oO.aCSS.length === 0) return;
var iI = oO.aCSS.length - 1;
for(; iI >= 0; iI--)
{
var oA = document.createElement('a');
oA.href = "#montrer";
oA.innerHTML = '<img src="plus.gif" width="16" height="16" alt="+" />';
oO.aCSS[iI].parentNode.insertBefore(oA, oO.aCSS[iI]);
oO.aCSS[iI].className = oO.Display;
oA.onclick = oO._display;
}
}
};
if(typeof Array.prototype.push === "undefined")
Array.prototype.push = ArrayPush;
oO._fastLoadEvent(oO._init);
} catch(catastrophe) {};
//]]></script>
</head>
<body>
<p class="test">Riri</p>
<div>
<h3 class="test">Fifi</h3>
<ul>
<li class="test">Loulou</li>
</ul>
</div>
</body>
</html>
Pour t'aider, je te conseille de lire les tutos JS d'Alsacréations.
