Spoiler BBCode
-
- Messages : 202
- Enregistré depuis : 3 ans 6 mois
- Forum phpBB : https://phpbb-forum.fr/forum
- Intérêt : Forum des BBCodes
Le forum et vous
Spoiler BBCode
MessageSpoiler BBCode permet d'afficher et masquer un texte au clique de souris
Utilisation du BBCode :
Code : Tout sélectionner
[spoiler={INTTEXT?}]{TEXT}[/spoiler]
Code HTML de remplacement :
Code : Tout sélectionner
<style> button { outline: 0 !important; } div .sbbctitletext { font-weight:bold; padding-left:5px; } div .sbbctitleopen::before { float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f055"; } div .sbbctitleclose::before { float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f056"; } div .sbbccontent { margin-top:3px; margin-bottom:15px; margin-left:15px; } </style> <div> <div> <xsl:choose> <xsl:when test="@spoiler"> <button type="button" onclick="var t=parentNode.nextElementSibling.style,o=firstElementChild.style,c=lastElementChild.style;o.display=t.display;t.display=c.display=(o.display)?'':'none';return!1"> <span class="sbbctitleopen" aria-hidden="true"><span class="sbbctitletext">{INTTEXT}</span></span> <span class="sbbctitleclose" style="display:none"><span class="sbbctitletext">{INTTEXT}</span></span> </button> </xsl:when> <xsl:otherwise> <button type="button" onclick="var t=parentNode.nextElementSibling.style,o=firstElementChild.style,c=lastElementChild.style;o.display=t.display;t.display=c.display=(o.display)?'':'none';return!1"> <span class="sbbctitleopen" aria-hidden="true"><span class="sbbctitletext">{L_DISPLAY}</span></span> <span class="sbbctitleclose" style="display:none"><span class="sbbctitletext">{L_COLLAPSE_VIEW}</span></span> </button> </xsl:otherwise> </xsl:choose> </div> <div class="sbbccontent" style="display: none;">{TEXT}</div> </div>
Ligne d'aide :
Code : Tout sélectionner
Spoiler: [spoiler]Texte ici[/spoiler]
Exemple :
Code : Tout sélectionner
[spoiler]Lorem Ipsum is simply dummy text of the printing and typesetting industry.[/spoiler]

-Gandhi
-
- Messages : 202
- Enregistré depuis : 3 ans 6 mois
- Forum phpBB : https://phpbb-forum.fr/forum
- Intérêt : Forum des BBCodes
Le forum et vous
Re: Spoiler BBCode
MessageUtilisation du BBCode :
Code : Tout sélectionner
[spoiler]{TEXT}[/spoiler]
Code HTML de remplacement avec script incorporé :
Code : Tout sélectionner
<script>
function show(btnId, divId)
{
var div = document.getElementById(divId);
var btn = document.getElementById(btnId);
if (div.style.display == 'none')
{
div.style.display = 'block';
btn.value = "Cacher";
}
else
{
div.style.display = 'none';
btn.value = "Afficher";
}
}
function hide(btnId, divId)
{
document.getElementById(divId).style.display = 'none';
document.getElementById(btnId).value = "Afficher";
}
</script>
<div>
<b>Spoiler !</b><br />
<input id="btnShow1" value="Afficher" onclick="show('btnShow1','spoiler1');" type="button">
</div>
<div class="spoilerBox">
<div id="spoiler1" style="display:none">
{TEXT}
<br /><input id="btnHide1" value="Cacher" onclick="hide('btnShow1','spoiler1');" type="button">
</div>
</div>
Optionnel :
Si vous voulez personnaliser en core plus ce Spoiler, voici un code à placer dans la stylesheet de votre style personnel
Code : Tout sélectionner
div.spoilerBox {border: 1px inset; padding: 6px; background: #6ab0de;}
div.spoilerBox input {display: block;}
Voici ce que ça donne, utile lors d'un long texte puisque le bouton Cacher se trouve aussi juste après la dernière phrase.
Cela évite de remonter au début du texte pour fermer le Spoiler

-Gandhi
Inscrivez-vous pour participer au forum ou Connecter-vous à votre compte.