Spoiler BBCode

BBCodes qui n'ont besoin de rien d'autre que l'installation via le PCA
Aucune aide ne sera donnée ici !
Avatar du membre
MariePop's MariePop's
Modération
Messages: []
Enregistré depuis: 4 ans 4 mois
Forum phpBB: https://phpbb-forum.ovh/
Intérêt: Forum des BBCodes
Le forum et vous

Spoiler BBCode

Message par MariePop's »

Description :
Spoiler 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]
Image
D'abord ils vous ignorent, ensuite ils vous raillent, ensuite ils vous combattent et enfin, vous gagnez.
-Gandhi
Avatar du membre
MariePop's MariePop's
Modération
Messages: []
Enregistré depuis: 4 ans 4 mois
Forum phpBB: https://phpbb-forum.ovh/
Intérêt: Forum des BBCodes
Le forum et vous

Re: Spoiler BBCode

Message par MariePop's »

Une autre déclinaison pour un BBCode Spoiler sur le forum


Utilisation 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

Spoiler !
Image
D'abord ils vous ignorent, ensuite ils vous raillent, ensuite ils vous combattent et enfin, vous gagnez.
-Gandhi