Bonjour.

Je suis en train de créer mon BBcode lorsque j'arrive à la balise "secret".
Cette balise a pour but de cacher le texte se trouvant à l'intérieur de celles-ci.

C'est à dire que lorsqu'on charge la page le texte entre ces deux balises devrait être caché.

En cliquant sur la zone cachée le texte devrait apparaître et en recliquant dessus disparaitre...

Seulement, avec mes codes le texte par défaut s'affiche et lorsqu'on clique dessus le texte disparait et impossible de le faire réapparaitre (sauf en réactualisant la page).

Je vous présente mes codes et dites moi si j'ai fait des erreurs :

Ma regex
$texte = preg_replace('#&lt;secret&gt;(.+)&lt;/secret&gt;#isU','<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" onclick="switch_spoiler(this)">$1</div></div>', $texte); 

Ma fonction Javascript
function switch_spoiler(element)
{
     if(element.style.visibility == 'visible')
     {
          element.style.visibility = 'hidden';
     }
     else
     {
          element.style.visibility = 'visible';
     }
}

Ma mise en forme (peu probable que ça vienne de là car la mise en forme est correcte !
.bbcode_secret {font-weight: bold; display: block; margin: auto; width: 90%;}
.bbcode_divsecret{border: 1px dashed #444; background-color: #FFF; padding: 8px; margin: auto; overflow: auto; width: 90%;}
.bbcode_texte {width: 100%; height: 100%; }

Merci.

Salut,

dans ta CSS mets un display:none; par défaut pour ton bloc, ensuite en javascript tu remplaces le "style.visibility" par "style.display" à voir si c'est "none" ou "block" et tu affiches en fonction de ça ;)

J'ai fait quelques modifications comme tu m'as dit mais il n'y a pas d'amélioration.


Ma regex

$texte = preg_replace('#&lt;secret&gt;(.+)&lt;/secret&gt;#isU','<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" onclick="switch_spoiler(this)">$1</div></div>', $texte); 

Ma fonction Javascript

function switch_spoiler(element)
{
     if(element.style.display == 'visible')
     {
          element.style.display = 'hidden';
     }
     else
     {
          element.style.display = 'visible';
     }
}

Ma mise en forme

.bbcode_secret {font-weight: bold; display: block; margin: auto; width: 90%;}
.bbcode_divsecret{border: 1px dashed #444; background-color: #FFF; padding: 8px; margin: auto; overflow: auto; width: 90%; display: block;}
.bbcode_texte {width: 100%; height: 100%; display: none; }

Le problème est que le texte n'apparait pas même avec display.style.visibility ou display :(
Merci.

Remplace ta fonction javascript par ça :

function switch_spoiler(element)
{
     if(element.style.display == 'block' || element.style.display == '')
     {
          element.style.display = 'none';
     }
     else
     {
          element.style.display = 'block';
     }
}

Pareil.

C'est l'affichage du texte qui ne fonctionne pas mais comme je suis nul en javascript je ne sais pas comment régler :(

Alors essaie ceci :

$texte = preg_replace('#&lt;secret&gt;(.+)&lt;/secret&gt;#isU','<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" id="'.($var = md5(microtime())).'" onclick="switch_spoiler('.$var.')">$1</div></div>', $texte);


function switch_spoiler(id)
{
     var element = document.getElementById(id);
     if(element.style.display == 'block' || element.style.display == '')
     {
          element.style.display = 'none';
     }
     else
     {
          element.style.display = 'block';
     }
}


Le texte n'apparait toujours pas :s

Quand tu affiches la source de la page générée, tu peux copier le code xhtml comprenant ton bloc secret ici stp ?

Arf oui ok j'avais oublié deux apostrophes :

$texte = preg_replace('#&lt;secret&gt;(.+)&lt;/secret&gt;#isU','<span class="bbcode_secret">Zone secréte, cliquez pour afficher</span><div class="bbcode_divsecret"><div class="bbcode_texte" id="'.($var = md5(microtime())).'" onclick="switch_spoiler(\''.$var.'\')">$1</div></div>', $texte);