Spoiler BBCode

BBCodes qui n'ont besoin de rien d'autre que l'installation via le PCA
Aucune aide ne sera donnée ici !
Message par MariePop's »
Avatar du membre
MariePop's MariePop's
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

Message

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
Message par MariePop's »
Avatar du membre
MariePop's MariePop's
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

Message

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
Partagez cette page
Twitter Whatsapp Linkedin Email
Vous devez être membre du forum pour répondre
Inscrivez-vous pour participer au forum ou Connecter-vous à votre compte.