Effet Spoiler

par **macgawel** » 25 mars 2011, 13:45

Merci.

Je viens de faire ça mais ça ne fonctionnes pas...

Bonjour.

1. "Ca ne fonctionne pas", c'est un peu juste.
Messages d'erreur ? La page plante ? Ca fonctionne mais le résultat ne correspond pas aux attentes ? Autre (préciser) ?

2. Tu peux avoir des indications sur le fonctionnement du JS avec certaines extensions (Firebug pour FF, par exemple).

3. Il faudrait avoir la page compète, ça pourrait aider...

Sinon :
- Tu as bien pensé à dmeander à ta page de récupérer jQuery ?

<script type="text/javascript" src="CheminDuFichier/jquery.js"></script>

- Ce ne doit pas causer le problème, mais un span est un élément inline, et une liste un élément bloc.
Et tu ne dois pas inclure un élement bloc dans un élément inline...

- <a (...) href="javascript:;"> Ca pointe vers quoi ?!

- Pour des raisons diverses et variées, les utilisateurs peuvent ne pas avoir JS activé.
La bonne pratique, c'est :
A l'ouverture de la page tout est visible (comme ça, si pas de JS les spoilers sont visibles).
Au chargement on cache tous les spoilers par JS.
Au clic sur le lien, on cache tous les spoilers ET on affiche le spoiler concerné.

par **orell1** » 25 mars 2011, 13:19

Merci.

Je viens de faire ça mais ça ne fonctionnes pas...

<SCRIPT type=text/javascript>
$('essai').click(function()
   {
   if ($this.hasClass('actif')) return false;

   $('.visible').removeClass('visible').fadeOut();
   $('.actif').removeClass('actif');

   $(this).addClass('actif').next().addClass('visible').fadeIn();
   return false;
   });

</SCRIPT>


<ul style="list-style-type: square; margin-left: -22px; margin-top: 15px;">
<li><span style="font-size: small; font-family: trebuchet ms,geneva; color: #000;"><span style="color: #ffffff; font-family: comic sans ms,sans-serif;">Les s&eacute;ances ont une dur&eacute;e de 45min</span><br /></span></li>
</ul>
<div id="essai"> <a style="color: #35b1dc; margin-top: 50px; font-family: comic sans ms;" ><img src="images/plus.jpg" alt="En savoir plus" hspace="10" width="20" height="20" align="absmiddle" /> Les Arcs 1600 et 1800 </a><span style="display: none;"> <br />
<div id="essai">
<ul style="list-style: square; line-height: 30px; margin-top: 25px; margin-left: -25px; color: #ffffff; font-size: small; font-family: comic sans ms;">
<li>Le prix d'un cours priv&eacute; pour une personne est de 20&euro; </li>
<li>Le prix pour deux personnes est de 15&euro; / personne </li>
<li>A partir de trois personnes le prix est de 10&euro; / personne </li>
<br /> 
</ul>
</div>
</span></div>
<div style="margin-top: 15px;"><img src="images/plus.jpg" alt="En savoir plus" hspace="10" width="20" height="20" align="absmiddle"  /> Les Arcs 1950 et 2000 </a><span style="display: none;"> <br />
<div id="1">
<ul style="list-style-type: square; line-height: 30px; margin-top: 25px; margin-left: -25px; color: #fff; font-size: small;">
<li>Le prix d'un cours priv&eacute; pour une personne est de 30&euro; </li>
<li>Le prix pour deux personnes est de 25&euro; / personne </li>
<li>Le prix pour trois personnes est de 20&euro; / personne </li>
<li>Le prix pour quatre personnes est de 15&euro; / personne </li>
<li>A partir de cinq personnes le prix est de 10&euro; / personne</li>
<br /> 
</ul>
</div>
</span></div>

Merci par avance

par **Berzemus** » 07 mars 2011, 12:21

Ce que j'ai écris est une règle Jquery. Il te faudra inclure la règle Jquery, ainsi que la bibliothèque Jquery (sinon elle ne fonctionnera tout simplement pas).

Quant à la position:
Soit il faut mettre la règle dans le document.ready

Code : Tout sélectionner

$(document).ready(function() {
   // Règles jquery à exécuter lorsque la page est chargée
   });

Soit en fin de page, avant les balises de fermeture du body, dans des balises script, forcément.

par **orell1** » 07 mars 2011, 11:53

Merci!
Je peux l'inserer dans un HTML?
ou est-ce que je mets mon texte par rapport à ton codage?
Cette fonction a un nom de manière à ce que je cherche comment travailler le codage...?

Merci beaucoup!

par **Berzemus** » 07 mars 2011, 11:48

Oh, avec Jquery, et quelques évènements, ce serait très simple. Quelque chose du genre

Code : Tout sélectionner

$('div#X').click(function()
   {
   if ($this.hasClass('actif')) return false;

   $('.visible').removeClass('visible').fadeOut();
   $('.actif').removeClass('actif);

   $(this).addClass('actif').next().addClass('visible').fadeIn();
   return false;
   });

Bon, la c'est assez avancé puisqu'il vérifie qu'il n'est pas déjà actif, mais sinon, l'idée est la.

par **orell1** » 07 mars 2011, 11:10

Et tu n'as pas une idée de comment je peux faire cela?

Merci par avance.

par **Berzemus** » 07 mars 2011, 10:39

Ce sera sans doute en javascript plutôt qu'en Php.

par **orell1** » 07 mars 2011, 07:48

Personne ne sait ...?

Cordialement.

par **orell1** » 06 mars 2011, 19:03

voici...

http://www.sportncoachlesarcs.com/index ... l&id_inf=9

par **raskas** » 06 mars 2011, 19:00

Tu pourrais mettre un lien vers ta page, car je ne comprend pas vraiment ce que tu veut dire...

par **orell1** » 06 mars 2011, 16:32

Bonjour,

je viens de créer un effet SPOILER sur les deux titres ci dessous.
Mon soucis est que lorsque je clique sur un des deux titre l'effet fonctionne bien mais je souhaiterai que lorsque je clique sur l'autre titre l'effet spoiler soit inversé.

Genre je clique sur le premier titre, les infos cachés apparaissent, je clique sur le deuxième titre les infos cachées se dévoilent mais les infos du premier titre se cachent et vis versa...

Merci par avance!

Voici le codage:

<ul style="list-style-type: square; margin-left: -22px; margin-top: 15px;">
<li><span style="font-size: small; font-family: trebuchet ms,geneva; color: #000;"><span style="color: #ffffff; font-family: comic sans ms,sans-serif;">Les s&eacute;ances ont une dur&eacute;e de 45min</span><br /></span></li>
</ul>
<div><a style="border: 0;" onClick="bascule('boite');" href="#"></a> <a style="color: #35b1dc; margin-top: 50px; font-family: comic sans ms;" onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" href="javascript:;"><img src="images/plus.jpg" alt="En savoir plus" hspace="10" width="20" height="20" align="absmiddle" /> Les Arcs 1600 et 1800 </a><span style="display: none;"> <br />
<div id="1">
<ul style="list-style: square; line-height: 30px; margin-top: 25px; margin-left: -25px; color: #ffffff; font-size: small; font-family: comic sans ms;">
<li>Le prix d'un cours priv&eacute; pour une personne est de 20&euro; </li>
<li>Le prix pour deux personnes est de 15&euro; / personne </li>
<li>A partir de trois personnes le prix est de 10&euro; / personne </li>
<br /> 
</ul>
</div>
</span></div>
<div style="margin-top: 15px;"><a style="border: 0;" onClick="bascule('boite');" href="#"></a> <a style="color: #35b1dc; font-family: comic sans ms;" onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" href="javascript:;"><img src="images/plus.jpg" alt="En savoir plus" hspace="10" width="20" height="20" align="absmiddle" /> Les Arcs 1950 et 2000 </a><span style="display: none;"> <br />
<div id="1">
<ul style="list-style-type: square; line-height: 30px; margin-top: 25px; margin-left: -25px; color: #fff; font-size: small;">
<li>Le prix d'un cours priv&eacute; pour une personne est de 30&euro; </li>
<li>Le prix pour deux personnes est de 25&euro; / personne </li>
<li>Le prix pour trois personnes est de 20&euro; / personne </li>
<li>Le prix pour quatre personnes est de 15&euro; / personne </li>
<li>A partir de cinq personnes le prix est de 10&euro; / personne</li>
<br /> 
</ul>
</div>
</span></div>

Effet Spoiler

Répondre

Étendre la vue Revue du sujet : Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Re: Effet Spoiler

Effet Spoiler