Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
Spoiler en Javscript
Auteur Message
Répondre en citant
Message Spoiler en Javscript 
Bonjour tout le monde,
je vous donne un code pour faire un spoiler en HTML.
n'hésitez pas à commenter.
Code:
[lang=php]
<!-- code HTML-->

   <a href="#" onclick="afficher()" id="afficher">Afficher</a>
   <a href="#" onclick="fermer()" id="masquer">Cacher</a>

   <div id="spoiler"> 

      <p>Contenu de Votre spoiler</p>

   </div>

<!--styles css-->
<style>
   #masquer {display : none;} /*masque le lien "cacher",ce style sera modifié par le javascript*/
   #afficher {display : inline;} /*affiche le lien "afficher",ce style sera modifié par le javascript*/
   #spoiler {
      height: 0; /*cache le texte contenu dans le spoiler en réglant la taille à 0,ce style sera modifié par le javascript.*/
      width: 100%; /*paramètre de base*/
      overflow-x: hidden; /*paramètre de base*/
      -webkit-transition-duration: 0.4s; /*mettre une transition pour que ce soit plus agréable (safari)*/
      transition-duration: 0.4s; /*transition pour les autres navigateurs*/
   }
</style>

<!--javascript-->
<script>
   function afficher() {   //demmarage de la fonction au clic du lien "afficher"
   document.getElementById('masquer').style.display ='inline'; //affiche le lien "masquer"...
   document.getElementById('afficher').style.display='none'; //et cache le lien "afficher".
   document.getElementById("spoiler").style.height = "100%"; /*Affiche le spoiler.Il est préférable de remplacer 100% par une valeur en pixel afin de pouvoir avoir une transition fluide.
si vous ne pouvez pas mettre une valeur en pixel,changer la transition à 0 pour ne pas avoir un délai entre le clic et l'affichage"*/
   }   

   function fermer() {   //l'inverse de la fonction précédente,s'ouvre au clic du lien "afficher"
   document.getElementById('masquer').style.display ='none';   
   document.getElementById('afficher').style.display='inline';
   document.getElementById("spoiler").style.height = "0px";
   }   
</script>





______________________________________________________


cliquer sur un des liens n'est pas dangereux
Ancien site,Nouveau site
Mon site de scan
Vous êtes le
visiteur
Chaine Youtube:
Visiter le site web du posteur Skype
Message Publicité 
PublicitéSupprimer les publicités ?


Répondre en citant
Message Re: Spoiler en Javscript 
logan T a écrit:
Bonjour tout le monde,
je vous donne un code pour faire un spoiler en HTML.
n'hésitez pas à commenter.
Code:
[lang=php]
<!-- code HTML-->

   <a href="#" onclick="afficher()" id="afficher">Afficher</a>
   <a href="#" onclick="fermer()" id="masquer">Cacher</a>

   <div id="spoiler"> 

      <p>Contenu de Votre spoiler</p>

   </div>

<!--styles css-->
<style>
   #masquer {display : none;} /*masque le lien "cacher",ce style sera modifié par le javascript*/
   #afficher {display : inline;} /*affiche le lien "afficher",ce style sera modifié par le javascript*/
   #spoiler {
      height: 0; /*cache le texte contenu dans le spoiler en réglant la taille à 0,ce style sera modifié par le javascript.*/
      width: 100%; /*paramètre de base*/
      overflow-x: hidden; /*paramètre de base*/
      -webkit-transition-duration: 0.4s; /*mettre une transition pour que ce soit plus agréable (safari)*/
      transition-duration: 0.4s; /*transition pour les autres navigateurs*/
   }
</style>

<!--javascript-->
<script>
   function afficher() {   //demmarage de la fonction au clic du lien "afficher"
   document.getElementById('masquer').style.display ='inline'; //affiche le lien "masquer"...
   document.getElementById('afficher').style.display='none'; //et cache le lien "afficher".
   document.getElementById("spoiler").style.height = "100%"; /*Affiche le spoiler.Il est préférable de remplacer 100% par une valeur en pixel afin de pouvoir avoir une transition fluide.
si vous ne pouvez pas mettre une valeur en pixel,changer la transition à 0 pour ne pas avoir un délai entre le clic et l'affichage"*/
   }   

   function fermer() {   //l'inverse de la fonction précédente,s'ouvre au clic du lien "afficher"
   document.getElementById('masquer').style.display ='none';   
   document.getElementById('afficher').style.display='inline';
   document.getElementById("spoiler").style.height = "0px";
   }   
</script>



Ton code est plutôt bien Mr. Green
Le problème maintenant c'est qu'il ne s'adapte pas dans n'importe situation, c'est-à-dire qu'il faudra que tu fasse plusieurs fonctions identiques (ça se règle avec quelques arguments)

Donc voici une version "adaptable" pour n'importe quel élément avec l'utilisation d'arguments :


Code:
[lang=html5]<!-- code HTML-->

   <a href="#" onclick="afficher('spoiler_1','afficher_1','masquer_1','300px')" id="afficher_1">Afficher</a>
   <a href="#" onclick="fermer('spoiler_1','afficher_1','masquer_1')" id="masquer_1">Cacher</a>

   <div id="spoiler_1"> 
      <p>Contenu de Votre spoiler_1</p>
   </div>
   
   
   
   <a href="#" onclick="afficher('spoiler_2','afficher_2','masquer_2','300px')" id="afficher_2">Afficher</a>
   <a href="#" onclick="fermer('spoiler_2','afficher_2','masquer_2')" id="masquer_2">Cacher</a>

   <div id="spoiler_2"> 
      <p>Contenu de Votre spoiler_2</p>
   </div>

<!--styles css-->
<style>
   #masquer_1,#masquer_2 {display : none;}
   #afficher_1,#afficher_2 {display : inline;}
   #spoiler_1,#spoiler_2 {
      height: 0px;
      width: 100%;
      background: #333;
      color: #ccc;
      overflow-x: hidden;
      -webkit-transition-duration: 0.4s;
      transition-duration: 0.4s;
   }
</style>

<!--javascript-->
<script>
   function afficher(id_spoiler,id_btn_afficher,id_btn_masquer,height) { // On passe 4 arguments à la fonction qui seront traduit au sein de celle-ci
                                                                         //par 2 variables ayant pour nom le même nom que les arguments
      document.getElementById(id_btn_masquer).style.display ='inline';
      document.getElementById(id_btn_afficher).style.display='none';
      document.getElementById(id_spoiler).style.height = height;
   }   

   function fermer(id_spoiler,id_btn_afficher,id_btn_masquer) { //Ici seul 3 arguments sont passés à la fonction puisque comme le but est de caché l'élément,
                                        //on sait d'avance qu'elle va être la valeur de height c'est-à-dire 0px
      document.getElementById(id_btn_masquer).style.display ='none';   
      document.getElementById(id_btn_afficher).style.display='inline';
      document.getElementById(id_spoiler).style.height = "0px";
   }   
</script>


Ensuite, on voit qu'à force on doit redéfinir pour chaque élément un style, pour ne plus faire ça on applique une classe.
Puis pour "simplifier" le code, au lieu de faire 2 boutons et de les "remplacer" à tour de rôle avec display, il suffit en fait de simplement modifier le texte d'un seul bouton Okay
Comme on utilise un bouton on devra ajouter une simple condition pour savoir si le spoiler est caché ou pas Mr. Green


Code:
[lang=html5]<!-- code HTML-->

   <a href="#" onclick="spoiler('spoiler_1',this,'300px')">Afficher</a>
   <div id="spoiler_1" class="content-spoiler"> 
      <p>Contenu de Votre spoiler_1</p>
   </div>
   
   
   
   <a href="#" onclick="spoiler('spoiler_2',this,'200px')">Afficher</a>
   <div id="spoiler_2" class="content-spoiler"> 
      <p>Contenu de Votre spoiler_2</p>
   </div>

<!--styles css-->
<style>
   .content-spoiler {
      height: 0px;
      width: 100%;
      background: #333;
      color: #ccc;
      overflow-x: hidden;
      -webkit-transition-duration: 0.4s;
      transition-duration: 0.4s;
   }
</style>

<!--javascript-->
<script>
   function spoiler(id,btn,height) {
      var id_height = document.getElementById(id).style.height;
      if (id_height=="0px" || id_height==""){
         //SHOW
         document.getElementById(id).style.height = height;
         btn.innerText = "Cacher";
      } else {
         //HIDE
         document.getElementById(id).style.height = "0px";
         btn.innerText = "Afficher";
      }
   }
</script>


Maintenant le code est un peu mieux optimiser et il est prêt à être utilisé Mr. Green Okay





______________________
Bon vu que je m'ennui, j'ai fait un truc MEGA pratique pour faire des spoilers, j'ai testé ça sous Chrome, Opéra et Edge :


Code:
[lang=html5]<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- CSS -->
    <style>
      @import url('https://fonts.googleapis.com/css?family=Coming+Soon|Roboto');
      .html,body {margin:0;padding:0;font-family: 'Roboto', sans-serif;background: #CCC;}
      .btn {
        display: inline-block;
        font-family: 'Coming Soon', cursive;
        padding: 10px;
        margin: 5px;
        background: #07F;
        text-decoration: none;
        color: #FFF;
        font-size: 25px;
        width: 200px;
        text-align: center;
        border-radius: 5px;
        border-bottom: 1px solid #999;
        transition: all 1s ease;
      }
      .btn:hover {
        background: #05F;
      }

      .content-spoiler {
        display: block;
        width: 50%;
        padding: 20px;
        margin: 5px;
        background: #FFF;
        color: #07F;
      }
    </style>
  </head>
  <body>

    <!-- HTML-->
    <a href="#spoiler_1" data-text-hide="Cacher Spoiler 1" class="spoiler btn">Afficher Spoiler 1</a>
    <a href="#spoiler_2" data-text-hide="Cacher Spoiler 2" class="spoiler btn">Afficher Spoiler 2</a>
    <div id="spoiler_1" class="content-spoiler">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
    <div id="spoiler_2" class="content-spoiler">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

    <!-- Javascript-->
    <script>
      var spoiler = {

        getCssValue: function(a,b){
          var c='';
          if (document.defaultView && document.defaultView.getComputedStyle){
              try{c=document.defaultView.getComputedStyle(a,'').getPropertyValue(b);}catch(e){c='';}
          }
          else if (a.currentStyle){
            try{b=b.replace(/\-(\w)/g,function(d,e){return e.toUpperCase();});c=a.currentStyle[b];}catch(e){c='';}
          }
          return c;
        },

        setVendor: function(element, property, value) {
          element.style["webkit" + property] = value;
          element.style["moz" + property] = value;
          element.style["ms" + property] = value;
          element.style["o" + property] = value;
          element.style[property] = value;
        },

        init: function(){
          var list = document.getElementsByClassName("spoiler");
          for (var i=0; i<list.length; i++) {
            var height="",show_text_=list[i].innerText;
            var el_a = document.getElementById((list[i].getAttribute("href").substring(1,list[i].getAttribute("href").length)));
            if(el_a.style.height==""){el_a.style.height=spoiler.getCssValue(el_a,"height");height=el_a.style.height}
            if(list[i].hasAttribute("data-text-hide")){list[i].innerText=list[i].getAttribute("data-text-hide")}
            list[i].setAttribute("data-text-show",show_text_);
            list[i].addEventListener("click",function(e){
              var id = this.getAttribute("href").substring(1,this.getAttribute("href").length),
                  el = document.getElementById(id),
                  hide_text = this.getAttribute("data-text-show"),show_text = this.getAttribute("data-text-show");
              if(this.hasAttribute("data-text-hide")){hide_text=this.getAttribute("data-text-hide")}
              if (el.style.height=="0px") {
                this.innerText=show_text;spoiler.show(el,height);
              } else {
                this.innerText=hide_text;spoiler.hide(el);
              }
              e.preventDefault();
            });
            el_a.style.overflowY = "hidden";
            el_a.style.height = "0px";el_a.style.paddingTop = "0px";el_a.style.paddingBottom = "0px";
            var el_a_transition = spoiler.getCssValue(el_a,"transition");
            if (el_a_transition!="") {
              spoiler.setVendor(el_a,"transition",el_a_transition+",padding-top .5s ease 0s,padding-bottom .5s ease 0s,height .5s ease 0s");
            } else {
              spoiler.setVendor(el_a,"transition","padding-top .5s ease 0s,padding-bottom .5s ease 0s,height .5s ease 0s");
            }
          }
        },

        hide: function(a){
          a.style.height = "0px";
          a.style.paddingTop = "0px";
          a.style.paddingBottom = "0px";
        },
        show: function(a,b){
          a.style.height = b;
          a.style.paddingTop = "";
          a.style.paddingBottom = "";
        }

      }
      spoiler.init();
    </script>

  </body>
</html>



Je t'explique comment on doit s'en servir :

Pour placer un bouton spoiler, il suffit de mettre ce code :
Code:
[lang=html5]<a href="#spoiler_1" data-text-hide="Cacher Spoiler 1" class="spoiler btn">Afficher Spoiler 1</a>

Ensuite tu dois connecter ce bouton à un container de spoil, pour connecter un bouton spoiler et un container de spoil tu dois mettre dans l'attribut href du bouton spoiler l'id du container de spoil en laissant le #
Ce qui donne ceci au final :
Code:
[lang=html5]<a href="#spoiler_1" data-text-hide="Cacher Spoiler 1" class="spoiler btn">Afficher Spoiler 1</a>
<div id="spoiler_1" class="content-spoiler">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

Le plus important est de laisser la classe spoiler au bouton spoiler car sinon la fonction init dans l'objet spoiler ne le détecte pas comme étant un bouton spoiler Okay
Et c'est tout, l'objet spoiler se charge de tout à ta place, le seul truc que tu dois faire et de connecter un bouton spoiler à un container de spoil par l'intermédiaire de l'attribut href du bouton spoiler en y mettant l'id du container de spoil
Il faut bien sûr que l'objet spoiler soit présent dans la page et que tes boutons spoiler possèdent la classe spoiler


p.s : quand je dis "bouton" je parle bien sûr des liens




EDIT

Avec du jquery ça donne ça :


Code:
[lang=html5]<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- CSS -->
    <style>
      @import url('https://fonts.googleapis.com/css?family=Coming+Soon|Roboto');
      .html,body {margin:0;padding:0;font-family: 'Roboto', sans-serif;background: #CCC;}
      .btn {
        display: inline-block;
        font-family: 'Coming Soon', cursive;
        padding: 10px;
        margin: 5px;
        background: #07F;
        text-decoration: none;
        color: #FFF;
        font-size: 25px;
        width: 200px;
        text-align: center;
        border-radius: 5px;
        border-bottom: 1px solid #999;
        transition: all 1s ease;
      }
      .btn:hover {
        background: #05F;
      }

      .content-spoiler {
        display: block;
        width: 50%;
        padding: 20px;
        margin: 5px;
        background: #FFF;
        color: #07F;
      }
    </style>
  </head>
  <body>

    <a href="#spoiler_1" data-text-hide="Cacher Spoiler 1" class="spoiler btn">Afficher Spoiler 1</a>
    <a href="#spoiler_2" data-text-hide="Cacher Spoiler 2" class="spoiler btn">Afficher Spoiler 2</a>
    <div id="spoiler_1" class="content-spoiler">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
    <div id="spoiler_2" class="content-spoiler">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

    <script>
    $(function() {
       $('.content-spoiler').hide();
       $('.spoiler').each(function(){$(this).attr('data-text-show',$(this).text());});
       $('.spoiler').on('click', function(e) {
          var hide_text=$(this).attr('data-text-show'),show_text=$(this).attr('data-text-show');
          if(typeof $(this).attr('data-text-hide')!='undefined' && typeof $(this).attr('data-text-hide')!='false') {
              hide_text=$(this).attr('data-text-hide');
          }
          if($(this).text()==show_text){$(this).text(hide_text)}else{$(this).text(show_text)};
          $($(this).attr('href')).slideToggle(500);
          e.preventDefault();
       });
      });
    </script>
  </body>
</html>






______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Répondre en citant
Message Re: Spoiler en Javscript 
Flammrock a écrit:
logan T a écrit:
...[/code]



Ton code est plutôt bien Mr. Green
Le problème maintenant c'est qu'il ne s'adapte pas dans n'importe situation, c'est-à-dire qu'il faudra que tu fasse plusieurs fonctions identiques (ça se règle avec quelques arguments)

Donc voici une version "adaptable" pour n'importe quel élément avec l'utilisation d'arguments :

{{{Code_____<--- Clique pour dérouler}}}

Ensuite, on voit qu'à force on doit redéfinir pour chaque élément un style, pour ne plus faire ça on applique une classe.
Puis pour "simplifier" le code, au lieu de faire 2 boutons et de les "remplacer" à tour de rôle avec display, il suffit en fait de simplement modifier le texte d'un seul bouton Okay
Comme on utilise un bouton on devra ajouter une simple condition pour savoir si le spoiler est caché ou pas Mr. Green

{{{Code_____<--- Clique pour dérouler}}}
Maintenant le code est un peu mieux optimiser et il est prêt à être utilisé Mr. Green Okay





______________________
Bon vu que je m'ennui, j'ai fait un truc MEGA pratique pour faire des spoilers, j'ai testé ça sous Chrome, Opéra et Edge :

{{{Code_____<--- Clique pour dérouler}}}

Je t'explique comment on doit s'en servir :

Pour placer un bouton spoiler, il suffit de mettre ce code :
Code:
[lang=html5]<a href="#spoiler_1" data-text-hide="Cacher Spoiler 1" class="spoiler btn">Afficher Spoiler 1</a>

Ensuite tu dois connecter ce bouton à un container de spoil, pour connecter un bouton spoiler et un container de spoil tu dois mettre dans l'attribut href du bouton spoiler l'id du container de spoil en laissant le #
Ce qui donne ceci au final :
Code:
[lang=html5]<a href="#spoiler_1" data-text-hide="Cacher Spoiler 1" class="spoiler btn">Afficher Spoiler 1</a>
<div id="spoiler_1" class="content-spoiler">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>

Le plus important est de laisser la classe spoiler au bouton spoiler car sinon la fonction init dans l'objet spoiler ne le détecte pas comme étant un bouton spoiler Okay
Et c'est tout, l'objet spoiler se charge de tout à ta place, le seul truc que tu dois faire et de connecter un bouton spoiler à un container de spoil par l'intermédiaire de l'attribut href du bouton spoiler en y mettant l'id du container de spoil
Il faut bien sûr que l'objet spoiler soit présent dans la page et que tes boutons spoiler possèdent la classe spoiler


p.s : quand je dis "bouton" je parle bien sûr des liens




EDIT

Avec du jquery ça donne ça :

{{{Code_____<--- Clique pour dérouler}}}

merci pour le partage !
ton amélioration est très bien faite




______________________________________________________


cliquer sur un des liens n'est pas dangereux
Ancien site,Nouveau site
Mon site de scan
Vous êtes le
visiteur
Chaine Youtube:
Visiter le site web du posteur Skype
Répondre en citant
Message Spoiler en Javscript 
Juste pour ceux qui utilise JQuery
il suffit d'utiliser la méthode

.toggle()

donc :

Code:
$(".content-spoiler").toggle


Okay




______________________________________________________
AffPng.exe , StringBetween.exe , Hex2Png.exe
Message Spoiler en Javscript 


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch