Pseudo-lien qui fait apparaître un texte au clic

par Suk Lin Jeu 30 Juin 2011 - 1:15

Bonsoir !

Je me demandais s'il existait un script pour faire apparaître du texte au clic. Pour être un peu plus précise, je pensais à avoir du texte (quelques mots, sans plus...) cliquable ; une fois cliqué, du texte supplémentaire apparaîtrait en-dessous - mais sans être sous forme de bulle.

N'hésitez pas à me demander des explications complémentaires si ma description vous semble un peu floue Wink

Merci d'avance, et bonne soirée !

Cordialement

par Scipion Jeu 30 Juin 2011 - 9:40

Bonjour

Un lien de forum pris à titre d'exemple nous aiderait à mieux comprendre votre demande.

Cordialement

par Suk Lin Jeu 30 Juin 2011 - 12:07

Bonjour

Je n'ai rencontré aucun forum ayant eu recours à cela, en fait l'idée m'est venue hier soir en travaillant sur le mien. Je suis désolée... Pensez-vous que cela soit tout de même possible ?

Cordialement

par Scipion Jeu 30 Juin 2011 - 12:40

En effet, je pense que c'est possible. Essayez d'utiliser le tutoriel FA suivant :

Mettre la balise <acronym> en BBCode avec wow

Cordialement

par Suk Lin Jeu 30 Juin 2011 - 14:52

Je n'avais jamais remarqué ce tutoriel ! Merci de m'avoir fait partager ce lien. Mais en réalité ce n'est pas vraiment cela que je cherche, j'ai effectué une espèce de simulation dans l'intention de mieux vous montrer.

Imaginons un texte. Ici pour l'exemple, j'ai repris une explication du Lorem ipsum tiré de Wikipédia. Au bas de ce texte, je propose 2 syntagmes (version populaire - version originale) qui se comporteraient, je suppose, comme des liens.
Pseudo-lien qui fait apparaître un texte au clic Audebut

Pseudo-lien qui fait apparaître un texte au clic Audebut

En admettant que le lecteur désire prendre connaissance de la version populaire, ce dernier clique sur le lien correspondant. Il voit apparaître alors le texte :
Pseudo-lien qui fait apparaître un texte au clic Apreszlo

Pseudo-lien qui fait apparaître un texte au clic Apreszlo

Le lecteur a le loisir de recliquer pour faire disparaître le texte populaire et revenir à l'apparence initiale. S'il veut maintenant voir la version originale, de même, il clique sur "version originale" pour faire apparaître le texte :
Pseudo-lien qui fait apparaître un texte au clic Ensuite

Pseudo-lien qui fait apparaître un texte au clic Ensuite

En fait, je viens de me rendre compte que je recherche à peu près le même effet que les spoilers, si ce n'est en autrement plus discret.
Pseudo-lien qui fait apparaître un texte au clic Autrement

Pseudo-lien qui fait apparaître un texte au clic Autrement

Cordialement

par Adam_sfp Jeu 30 Juin 2011 - 17:30

Bonjour

Peut être en faisant une recherche en Jquery avec l'effet "Toggle"
Par exemple Jquery toggle tutorial

En voici un par exemple

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>TEST Fade Slider Toggle jQuery Plogin</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="http://sd-1.archive-host.com/membres/up/37821634957680146/toggle.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".fadeNext").click(function(){ $(this).next().fadeSliderToggle() return false; }) }); </script> <style> .fader{opacity:0;display:none;} </style> </head> <body> <a href="#" class="fadeNext">VERSION ORIGINALE</a> <div class="fader"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </body> </html>

Vous pouvez peut être l'adapter à ce que vous voulez faire..

Cordialement.

par Kaktus Jeu 30 Juin 2011 - 17:38

Ou à la rigueur, pourquoi ne pas utiliser les spoilers justement ?

Code:: [spoiler=TITREDUSPOILER][/spoiler]

Et après personnaliser au niveau du CSS les spoilers, à la rigueur. Smile

par Suk Lin Jeu 30 Juin 2011 - 22:03

Merci à vous deux pour vos astuces !

Adam : j'ai essayé votre exemple il y a un instant, c'est exactement cela ! Je vous remercie pour votre conseil, j'ignorais qu'il s'agissait là de l'effet Toggle. Je m'en souviendrais !

Je vous remercie tous les trois pour votre rapidité et votre efficacité.

Edit : oups !
J'avais essayé sur une page html du forum, l'effet était tip top.
Par contre, une fois que j'essaie dans un topic, ça ne fonctionne pas. J'ai mis le script entre les balises <head> du template overall_header, enregistré dans ma feuille de style la class=fader, mais le texte ne s'affiche plus au clic.
Qu'ai-je fait de travers ?

Très bonne soirée...

Cordialement

par Adam_sfp Jeu 30 Juin 2011 - 23:07

Bonsoir

Je n'est pas testé via les templates il est possible que $ se transforme en &#36 à la validation .

Essayez en remplaçant $ par jQuery

Cordialement.

par Suk Lin Jeu 30 Juin 2011 - 23:29

Rebonsoir !

J'ai essayé mais cela ne change rien.

Je vais détailler ma répartition à partir de votre exemple, peut-être y verrons-nous plus clair :

Entre les balises <head></head> du template overall_header
Dans le CSS
Dans le message posté sur le forum

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>TEST Fade Slider Toggle jQuery Plogin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://sd-1.archive-host.com/membres/up/37821634957680146/toggle.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
return false;
})
});
</script>

<style>
.fader{opacity:0;display:none;}
</style>
</head>
<body>
<a href="#" class="fadeNext">VERSION ORIGINALE</a>
<div class="fader">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</body>
</html>

Effet obtenu : seul "VERSION ORIGINALE" apparaît. Lorsque je clique, la page se recharge mais sans changement : le Lorem ipsum n'apparaît plus.

J'en viens donc à me demander si je ne devrais pas placer ce bout de code quelque part :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Pardonnez mon ignorance, et merci pour votre aide.

Cordialement

par Adam_sfp Ven 1 Juil 2011 - 10:00

Bonjour

Votre raisonnement est le même que le mien mais pas moyen que cela fonctionne et je ne comprend pas pourquoi...( je vais poser la question à mes collègues histoire d"éclairer ma lanterne)

Sinon un effet similaire qui lui fonctionne dans un post

le script à mettre juste avant </head> dans overall header

Code:: <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/testest.js"></script>

La partie CSS

Code:: #div1 { width:70%; display: none; padding:5px; border:2px solid #EFEFEF; background-color:Pink; } #click_here{ padding:5px; border:2px solid #FFEFEF; background-color:#00ff00; }

et ensuite dans votre post

Code:: <input type="button" id="click_here" value="Click Here"> <div id="div1"> <a href="#" class="close">[x]</a> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> </div>

Cordialement.

par Suk Lin Ven 1 Juil 2011 - 14:15

Bonjour !

J'ai essayé cette alternative, cela fonctionne parfaitement. Merci !

Si jamais vous avez des nouvelles concernant la première solution que vous m'aviez proposée, pouvez-vous m'en faire part ? On ne sait jamais que le problème surgisse ultérieurement avec un autre script.

En attendant je mets ce post en résolu, encore merci pour votre aide !

Belle après-midi

Cordialement.

Pseudo-lien qui fait apparaître un texte au clic

Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic

Re: Pseudo-lien qui fait apparaître un texte au clic