cela semble fonctionner a merveille, je vais maintenant tester en situation réelle, merci beaucoup.

je rectifie,
cela fonctionne a merveille, merci encore

<div onclick="afficher('identifiant_du_div_a_afficher');" id="afficher">Afficher</div> 
<div id="identifiant_du_div_a_afficher" style="display:none;">Le DIV à afficher</div> 

<script>
function afficher(divId) { 
  if(document.getElementById(divId)) { // si l'élément existe
    // on passe son style a "block" s'il est masqué pour le faire apparaitre et à "none" sinon pour le masquer
    document.getElementById(divId).style.display = (document.getElementById(divId).style.display=="none") ? "block" : "none" ;
  }
} 
</script>

[quote="lettucie"]mais, a moins de recopier n fois la fonction et de l'appeller afficher1 ..afficherN, je ne vois pas comment avoir n textes cliquables qui affiche un paragraphe sur une page.[/quote]
Pour éviter cette multiplication, tu pourrais par exemple passer l'élément cliqué ou son identifiant en paramètre de ta fonction, et l'utiliser pour savoir quel élément masquer ou faire apparaitre :)

[php]
<div onclick="afficher('identifiant_du_div_a_afficher');" id="afficher">Afficher</div>
<div id="identifiant_du_div_a_afficher" style="display:none;">Le DIV à afficher</div>

<script>
function afficher(divId) {
if(document.getElementById(divId)) { // si l'élément existe
// on passe son style a "block" s'il est masqué pour le faire apparaitre et à "none" sinon pour le masquer
document.getElementById(divId).style.display = (document.getElementById(divId).style.display=="none") ? "block" : "none" ;
}
}
</script>[/php]

Tout d'abord merci beaucoup pour ta réponse.
Le post dont tu parles permet effectivement de faire ce que je veux faire, mais, a moins de recopier n fois la fonction et de l'appeller afficher1 ..afficherN, je ne vois pas comment avoir n textes cliquables qui affiche un paragraphe sur une page.

De plus, je crois avoir bien cerné mon probleme. En fait, dans la mesure ou le script utilise un div pour montrer ou cacher, et comme j'utilise des divs pour la mise en forme, j'ai l'impression que lorsque je ferme un "sous" div, cela ne ferme pas necesssairement le bon.
Du coup je me demande si "ca se fait " d'avoir des divs imbriqués, et si dans ce cas il y a un moyen de bien fermer celui qu on veut ( ou alors si ca ferme systematiquement le dernier ouvert). evidement je ne suis pas sur que le prob vienne de là...

Encore une fois merci, ca m'aide a bien comprendre

Salut,
Je trouve que c'est bien compliqué tout ça c'est pourquoi je te conseil ce [url=http://www.phpfrance.com/forums/voir_sujet-12366.php]sujet[/url] avec un exemple plus facile à comprendre :)

Bonjour,
je suis à la fois débutant en javascript et profane en code, de manière generale. Je fais un site web et j'ai eu envie de faire une page où le paragraphe s'affiche seulement lorsque l'on clique sur le titre. Grace à un tuto (dont je n ai pas saisie toute la moelle http://www.onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html ) j'ai réussi a faire cette page qui fonctionne

http://hydre.gp.free.fr/contenus/aube.php?

seulement, lorsque je l'insere dans la trame du site, visiblement les balises posent des problemes ( ici ce doit etre les balises div);

http://hydre.gp.free.fr/pages/aube.php

donc je ne comprends pas pourquoi et forcement je ne sais pas quoi faire.
le script que j'utilise est :
[code]<script type="text/javascript">
function collapse()
{
// check if DOM is available, return if not
if(!document.createTextNode){return;}

// create new paragraph
var p=document.createElement('p');

// loop over all headlines of the second level
var heads=document.getElementsByTagName('h2');
for(var i=0;i<heads.length;i++)
{
// grab the next sibling (the loop is needed because
// of whitespace issues
var tohide=heads[i].nextSibling;
while(tohide.nodeType!=1)
{
tohide=tohide.nextSibling;
}
// hide the sibling by applying the class 'hidden' and
// show that the headline is clickable by applying
// the class 'trigger'
cssjs('add',tohide,'hidden')
cssjs('add',heads[i],'trigger')
// store the element to be hidden in an attribute
heads[i].tohide=tohide;
// add the class 'hover' when the mouse touches the headline
heads[i].onmouseover=function()
{
cssjs('add',this,'hover');
}
// remove the class 'hover' when the mouse leaves the headline
heads[i].onmouseout=function()
{
cssjs('remove',this,'hover');
}
// if the user activates the headline
heads[i].onclick=function()
{
// test if the class 'hidden' is already applied to the
// next sibling
if(cssjs('check',this.tohide,'hidden'))
{
// if that is the case, replace it with shown and
// the headline class with open
cssjs('swap',this,'trigger','open');
cssjs('swap',this.tohide,'hidden','shown');
} else {
// and vice versa
cssjs('swap',this,'open','trigger');
cssjs('swap',this.tohide,'shown','hidden');
}
}
// insert the new paragraph before the first h2.
document.body.insertBefore(p,document.getElementsByTagName('h2')[0]);
}
function cssjs(a,o,c1,c2)
{
switch (a){
case 'swap':
o.className=!cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
break;
case 'add':
if(!cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
break;
case 'remove':
var rep=o.className.match(' '+c1)?' '+c1:c1;
o.className=o.className.replace(rep,'');
break;
case 'check':
return new RegExp('\\b'+c1+'\\b').test(o.className)
break;
}
}
}
window.onload=collapse;
</script>[/code]


je rajoute le csss que j avais oublié


j'espère que quelqu un pourra m'aider, et je vous remercie d'avance[code] h2{
text-align: center;
font-size:110%;
font-weight:normal;
}
.hidden{
display:none;
}
.shown{
display:block;
}
.trigger{
background:transparent;
}
.open{
background:transparent;
color:10613e;
font-style: italic;
}
.hover{
background:transparent;
color:cdd9d9;
cursor:pointer;
}[/code]