[Résolu] Effet spoiler à améliorer

Bonjour,

Je tient actuellement une petite page perso où j'écris des articles. Pour ce faire j'utilise une balise spoiler quand je veux écrire des annotations, aparté ou simplement donner des liens supplémentaires.

J'utilise actuellement ce code:

    <div style="margin-bottom: 2px;"> <b>Spoiler! </b><input value="Afficher" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value='Afficher'; }" type="button"> </div> <div style="border: 1px inset; padding: 6px;"> <div style="display: none;">{TEXT}</div> </div>

source: https://www.phpbb.com/customise/db/bbcode/new_spoiler/

Mon problème est d'ordre pratique, j'aimerais que le bouton "Cacher" soit également à la fin de mon texte caché. Pour éviter au lecteur de devoir remonter (parfois de long paragraphes) en haut de la page pour cliquer sur le bouton "Cacher".

J'arrive à comprendre le texte: le principe de "If (this) do (that)" avec le "[1].getElementsByTagName " et le "[0].style.display" mais je n'arrive pas y extraire le texte nécessaire pour afficher ce bouton "Cacher" au bon endroit.
Je ne m'y connais pas en javascript, j'ai fais plusieurs essais à taton sans succès, donc je préfère vous demander déjà pour savoir si c'est possible et bien sur pour avoir de votre aide.

Merci pour vos réponses,

PS: Je rajoute une petite image si ce n'est pas clair:

Modifié par cedmars (06 Dec 2015 - 16:48)

Bonjour,

En continuant dans le même style de code que donnée (pas beau), pourquoi ne pas simplement dupliquer ton bouton?

<div style="margin-bottom: 2px;">
<b>Spoiler! </b>
  <input value="Afficher" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value='Afficher'; }" type="button"> </div> <div style="border: 1px inset; padding: 6px;"> 
<div style="display: none;">{TEXT}</div> 
</div>
<input value="Afficher" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value='Afficher'; }" type="button">

Mais c'est vraiment moche, et en plus y'a pas de synchro entre les 2 ...

Alors je me suis amusé un peu:

http://jsfiddle.net/Super_baloo8/fw13yx5m/1/

Comment ça fonctionne ? Le code est assez clair je pense?

Je te laisse le regarder, si t'as des questions, n'hésite pas.

le code que je t'ai écris fonctionne avec jQuery derrière

Afin de rester clair dans mon propos j'avais enlevé de mon premier message le texte suivant:
"Si vous avez une meilleure solution je suis aussi preneur"
Et bien tu y a aussi répondu J'ai changé avec ton code, ça marche nickel et ça gagnera en lisibilité je pense.

J'avais aussi effacé "Que pensez-vous du spoiler dans un article ? Mes articles sont assez long et ca me permet de rester très structuré entre les sous-partis mais bon si la personne a désactivé le javascript elle ne peut rien lire " donc si t'as un avis à me proposer je suis preneur

Encore merci.

Avec plaisir.

Qu'entends tu avec Spoiler exactement pour tes articles ? J'ai du mal à saisir

Des articles que je vais pouvoir visuellement raccourcir car ne concernant pas tout le monde, par exemple:

Faire un site internet:
- SI vous n'y connaissez rien en html, lisez ceci
[spoiler}
- Si vous savez coder en html/css, lisez ceci

...
Et donc par exemple le premier spoiler parlera de solutions "tout en un" wordpress,... avec des liens, tutos pour apprendre et le deuxième spoiler sera plutot pour personnaliser un site avec du code, utilisation de templates, java, tutos...

Donc les gens on un choix à faire qui est assez simple à expliquer avec les spoilers... mais j'imagine sans spoiler... on ne pourrait pas s'y retrouver, la structure de l'article serait très brouillon.

Un autre exemple serait simplement des liens, des vidéos, que j'aimerais partager sans pour autant casser la mise en forme de mon article écrit.

En fait c'est un peu pour ajouter de l'interaction mais est-ce que tu penses que c'est intéressant ou au contraire contre-productif ?

Donc pour moi ca me parait évident mais vu que je suis là je préfère demander

Ah ce n'est pas un spoiler alors

Un spoiler, c'est par exemple, pour le cas d'un Film où d'un livre, cacher une partie d'un texte pour éviter de raconter la fin

Ce que tu cherches, c'est juste un système de "hide/show".

Le plus simple ne serait-il pas d'avoir 2 articles complètements indépendant ? Ça me semble bien plus logique que de vouloir tout centraliser sur la même page.

A moins que ce ne soit pour présenter 2 vidéos différentes, là pourquoi pas.

Il doit y avoir des plugins pour wordpress pour ça déjà existant, autant pas se casser la tête, en fouillant rapidement j'ai trouver ceci:

https://github.com/lesterchan/wp-showhide/blob/master/wp-showhide.php

Spoiler ou hide/show, le principe reste le même Je parlais plus du principe que du mot en lui même.
Je n'utilise pas wordpress à vrai dire, que à la main
Okay je retiens le "2 articles indépendants" comme idée, encore merci

Bonjour,

Si on rajoute un deuxième bouton à la fin de la div du spoiler (juste après le {TEXT} de l'exemple de la question, on n'a pas besoin d'un code aussi long que celui du premier bouton, car ce deuxième bouton n'est affiché que quand le spoiler est lui aussi affiché, et donc par conséquent quand on cliquera dessus, ce sera uniquement pour cacher le spoiler). De plus, ce serait plus facile ici si :
- tu mettais des attributs "id" à tes balises (parce sinon, ton code est un peu fragile et complexe),
- tu mettais les déclarations de style dans une feuille de style à part (sauf éventuellement le display:none du spoiler car on utilise le fait qu'il soit à "none" dans le code des fonctions (si on met ça dans une feuille de style, la récupération de cette information sera toujours possible mais un poil plus complexe qu'ici),
- tu mettais le code des fonctions se déclenchant lors d'un clic sur un bouton à part lui aussi.

Le css (minimaliste, et à ne surtout pas laisser comme ça) :

div.spoilerBox {border: 1px inset; padding: 6px;}
div.spoilerBox input {display: block;}

Le html (avec ici le javascript inclus dedans) :

<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>
	<input id="btnShow1" value="Afficher" onclick="show('btnShow1','spoiler1');" type="button">
</div> 
<div class="spoilerBox">
	<div id="spoiler1" style="display:none">
	{TEXT}
	<input id="btnHide1" value="Cacher" onclick="hide('btnShow1','spoiler1');" type="button">
	</div>
</div>

Amicalement,

Salut Parsimonhi,

Ton code est intrusif, et si le javascript est désactivé on a des éléments inutiles dans la DOM.

Il ne permet pas de gérer la multi-instantiation sans devoir définir d'ID spécifique pour chaque bloc (code BBcode/wiki plus complexe à mettre en place, ou parseur plus complexe à mettre en place)

De sus, le premier input porte une information fausse une fois le texte affiché, au mieux, il faudrait le cacher.

Et si l'utilisateur souhaite caché de nouveau le texte sans allez au bout, il faut qu'il aille jusqu'en bas pour refermer le contenu.

Ce n'est pas l'utilisation "standard" qu'on a l'habitude de voir pour un spoiler.

Pour un simple "hide/show", pourquoi pas. Même si ce n'est que du vocabulaire, ce sont 2 besoin bien distinct pour ma part.

Si tu as besoin d'un système hide/show basé sur le même système avec titre "personnalisable":

http://jsfiddle.net/Super_baloo8/hazuc4w5
Modifié par Super_baloo8 (10 Dec 2015 - 13:28)

Bonjour,

Super_baloo8 a écrit :
Ton code est intrusif, et si le javascript est désactivé on a des éléments inutiles dans la DOM.

J'ai essayé de coller au mieux à la structure du code donné avec la question.

Certes, on peut (on doit) bien sûr inclure les boutons à la volée en généralisant tout ça via du code javascript en fin de page comme tu l'as très bien fait dans l'exemple que tu as donné. Mais vu la nature de la question initiale, ça m'a semblé un poil complexe pour aider à comprendre comment tout ça pouvait fonctionner.

Super_baloo8 a écrit :
Il ne permet pas de gérer la multi-instantiation sans devoir définir d'ID spécifique pour chaque bloque (code BBcode/wiki plus complexe à mettre en place, ou parseur plus complexe à mettre en place)

Oui, bien entendu, mais même remarque que ci-dessus sur la complexité que ça engendre, et les effets négatifs sur la compréhension du mécanisme de base qu'on souhaite mettre en place, à savoir un bouton qui montre/cache un texte et un autre qui ne fait que le cacher.

Super_baloo8 a écrit :
De sus, le premier input porte une information fausse une fois le texte affiché, au mieux, il faudrait le cacher.

Et si l'utilisateur souhaite caché de nouveau le texte sans allez au bout, il faut qu'il aille jusqu'en bas pour refermer le contenu.

Là, par contre, Master, je ne vois pas.

Sauf erreur de ma part, le bouton du haut est renommé en "Cacher" par le code que je propose, et donne bien la possibilité de cacher effectivement le texte lui aussi.

Un petit café ?

Amicalement,
Modifié par parsimonhi (10 Dec 2015 - 14:11)

parsimonhi a écrit :

Un petit café ?

Avec Plaisir

Sinon, effectivement, le premier bouton à le bon texte, mais à la relecture le deuxième n'aura pas le bon texte après une séquence d'affichage/cachage (il restera avec le terme "Afficher).

D'accord avec toi sur la complexité d'appréhension sur le code que j'ai donnée qui est moins évident.

Par contre, donner de mauvaise pratique n'aide pas non plus

Je pars à la machine, je t'attends
Modifié par Super_baloo8 (10 Dec 2015 - 15:44)

Bonjour,

Super_baloo8 a écrit :

Sinon, effectivement, le premier bouton à le bon texte, mais à la relecture le deuxième n'aura pas le bon texte après une séquence d'affichage/cachage (il restera avec le terme "Afficher).

Hum ! Je pense que ça marche en l'état.

Super_baloo8 a écrit :
Par contre, donner de mauvaise pratique n'aide pas non plus

Soit ! Voilà donc un petit jsfiddle en javascript pur et sans rien qui dépasse cette fois-ci : http://jsfiddle.net/42u1guyb/

EDIT : et histoire de coller au besoin exprimé dans l'image fournie par cedmars avec la question, voici une autre version : http://jsfiddle.net/2oj24c9r/

Amicalement,
Modifié par parsimonhi (10 Dec 2015 - 19:15)

Bonjour,

parsimonhi a écrit :

EDIT : et histoire de coller au besoin exprimé dans l'image fournie par cedmars avec la question, voici une autre version : http://jsfiddle.net/2oj24c9r/

Il a osé !
N'empêche je vois le outline bleu sur Chrome quand je clique sur le bouton, c'était pas prévu sur son image !

SolidSnake a écrit :
Bonjour,

Il a osé !
N'empêche je vois le outline bleu sur Chrome quand je clique sur le bouton, c'était pas prévu sur son image !

Non, non, je ne mettrais pas de button:focus {outline:none;} !

D'une manière générale, cet outline bleu (ou de rectangle en pointillé sur d'autres navigateurs) mériterait d'ailleurs un sujet à part, tellement il est mal traité.

Amicalement,

J'ai l'impression que ce dernier message est une bonne conclusion donc je me permets de mettre sujet résolu. Personnellement j'ai pris la première solution, de Super_baloo8, mais j'ai bien suivi les autres propositions (c'est toujours intéressant) donc merci aux autres participants également
A bientot sur le forum