Se connecter / S'enregistrer
Votre question

Créer des spoilers en HTML/CSS javascript

Dernière réponse : dans Programmation
11 Août 2013 12:25:22

Bonjour à tous,

En voyant le titre vous vous êtes surement dit "il aurait pu chercher sur Google". Je l'ai fait, mais justement, il y a une bonne centaine de résultats, et après en avoir testé plusieurs, je n'en ai trouvé aucun qui ne me convenait. Un seul à retenu mon attention :

  1. <script type="text/javascript">
  2. function apparaitre(){
  3.  
  4. var valeur_visibility = document.getElementById("texte").style.visibility;
  5. if (valeur_visibility == "hidden")
  6. {
  7. document.getElementById("texte").style.visibility = "";
  8. }
  9. else
  10. {
  11.  
  12. document.getElementById("texte").style.visibility = "hidden";
  13. }
  14. }
  15. </script>



  1. <div id="afficher_cacher"><a href="#" onclick="apparaitre();">Mon titre</a></div>
  2. <div id="texte" style="visibility:hidden">
  3. Si vous arrivez à voir ce texte alors mon script marche.
  4. </div>


Je l'ai légèrement modifier pour que "Mon titre" ne soit pas transformé en "Montrer" ou "Cacher".

Ce script me convient très bien à une seule exception : je ne peux pas en mettre plusieurs. (http://capfolio.fr/themecms.php > Partie "FAQ").

Ne connaissant pas le javascript, j'aurais besoin de votre aide.

Merci d'avance

Autres pages sur : creer spoilers html css javascript

11 Août 2013 14:44:59

Bonjours,
cela est simple , tu rajoute un argument a la function qui correspond a l'id de la div voulue.

  1. <script type="text/javascript">
  2. function apparaitre(iddiv){
  3. var valeur_visibility = document.getElementById(iddiv).style.visibility;
  4. if (valeur_visibility == "hidden") {
  5. document.getElementById(iddiv).style.visibility = "visible"; // c'est un peut plus propre comme ça !
  6. }
  7. else{
  8. document.getElementById(iddiv).style.visibility = "hidden";
  9. }
  10. }
  11. </script>

  1. <div id="afficher_cacher"><a href="#" onclick="apparaitre("div1');">Mon titre</a></div>
  2. <div id="afficher_cacher"><a href="#" onclick="apparaitre("divaaaa");">Mon titre</a></div>
  3. <div id="divaaaa" style="visibility:hidden">
  4. Si vous arrivez à voir ce texte alors mon script marche.
  5. </div>
  6. <div id="div1" style="visibility:hidden">
  7. Si vous arrivez à voir ce texte alors mon script marche.
  8. </div>
11 Août 2013 17:43:41

Merci beaucoup.

Comment faire pour que le texte qui n'est pas affiché ne prenne pas de place ? (s'il n'y a que "Mon titre" qui est affiché, cela prend moins de place que si le texte caché est lui-aussi affiché).

Et dernier point, comment faire pour que si j'ouvre le lien 1 cela ferme le lien 2 ? et inversement (un seul div ouvert à la fois)

Merci beaucoup
Contenus similaires
12 Août 2013 08:57:28

MonConfident a dit :

Comment faire pour que le texte qui n'est pas affiché ne prenne pas de place ? (s'il n'y a que "Mon titre" qui est affiché, cela prend moins de place que si le texte caché est lui-aussi affiché).


Pour cela tu doit aussi jouer avec la propriété "display" de css.
http://www.w3schools.com/css/css_display_visibility.asp

MonConfident a dit :

Et dernier point, comment faire pour que si j'ouvre le lien 1 cela ferme le lien 2 ? et inversement (un seul div ouvert à la fois)


Pour cela tu doit revoir toute la logique de la fonction JavaScript..
Je te conseil d'apprendre le JavaScript car je ne ferais pas le code a ta place ...
http://www.siteduzero.com/informatique/tutoriels/dynami...
12 Août 2013 09:07:41

D'accord, merci quand même
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS