CSS et fonction Display

Salut,

Voila j'ai un code CSS/HTML qui permet d'afficher la suite d'un texte masquer (comme pour des news).
Cela fonctionne, par contre je veux rajouter au bas de mon texte qui s'affiche (quand on clique sur "lire la suite") un lien fermer pour masquer à nouveau ce texte et revenir à l'affichqge premier.

Voici mon code dans le head:

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#hidden {display:none}

-->
</style>

Voici mon code dans le body :

Ici mon texte affich&eacute; en permanence. <br />
          <br /><p><a href="#" onclick="document.getElementById('hidden').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a></p><p id="hidden"> Suite du texte masqué par défaut et qui apparait quand on clique sur lire la suite<br /><br />
Mon lien pour Fermer</p>

Merci par avance pour votre aide
Nini

Bonjour,

Je te conseille de toujours essayer d'externaliser tes scripts afin de garder une structure html propre et de faciliter la maintenance de tes événements.
J'ai réalisé un petit script non intrusif qui devrait correspondre à ce que tu cherches. Il y a sans doute moyen d'optimiser tout ça, mais le principe y est.

[b][#black]HTML[/#][/b]


<div id="news">
	
	<p><strong>Texte affichée en permanence</strong></p>
	<p class="descriptionLongue">Lorem ipsum dolor sit amet…</p>

	<p><strong>Texte affichée en permanence</strong></p>
	<p class="descriptionLongue">Lorem ipsum dolor sit amet…</p>
	
	<p><strong>Texte affichée en permanence</strong></p>
	<p class="descriptionLongue">Lorem ipsum dolor sit amet…</p>

</div>




[b][#black]JAVASCRIPT[/#][/b]


var W3CDOM=(document.createElement && document.getElementsByTagName);

function showHide(oP)
{
    if(!W3CDOM) return;
    
    var aP,iI,oLien,oTexteLien,aLiens,oWrap,sReadMore,sClose;
    
    oWrap = document.getElementById('news');
    if(!oWrap) return;
    
    aP = oWrap.getElementsByTagName(oP);
    if(!aP) return;
    
    sReadMore = 'Lire la suite...';
    sClose = 'Fermer';

    for(iI in aP)
    {
        if(/descriptionLongue/.test(aP.item(iI).className))
        {
            oLien = document.createElement('a');
            oLien.href='#';
            oTexteLien = document.createTextNode(sReadMore);
            oLien.appendChild(oTexteLien);
            oWrap.insertBefore(oLien,aP.item(iI).nextSibling);
            aP.item(iI).style.display='none';
        }
    }
    aLiens = oWrap.getElementsByTagName(oLien.nodeName);
    for(iI in aLiens)
    {
            aLiens.item(iI).onclick=function()
            {
                if (this.firstChild.nodeValue==sReadMore)
                {
                    this.previousSibling.style.display='block';
                    this.firstChild.nodeValue=sClose;
                }
                else
                {
                    this.previousSibling.style.display='none';
                    this.firstChild.nodeValue=sReadMore;
                }
                return false;
            }
    }
}

window.onload=function() {showHide('p');}

Au passage, ce fil aurait plutôt sa place dans le salon DOM, JavaScript, ECMAScript.