• Annonce Cacher une partie d'un texte


    Dimanche 2 Septembre à 13:20
    DrCut

    Bonjour, smile

    Parfois, c'est utile de cacher une partie d'un texte dans un article. Pour se faire, il suffit d'utiliser le javascript! J'ai trouvé ce script sur le Net, et merci à son auteur. ^^
    Il faut que votre blog soit activé!

    Menu - Apparence - Zone de script - Statut : Actif

    Sinon, ça ne marchera pas!

    C'est dans cette zone que vous copiez et coller ce code :

    <script type="text/javascript">
    function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    </script>

    Puis dans la page de votre article

    Cliquez sur le bouton : Éditer et ensuite - Vous devez être en mode 'Expert' et cliquez sur Code source
    Un petit bouton comme ça : <>

    Puis vous copiez et collez ceci :

    <button onclick="toggle_visibility('spoil');">MONTRER</button>
    <div id="spoil" style="display: none;">
    <p>Ici j’écris mon texte caché.</p>
    </div>

    Explication

    Le texte qu'on souhaite cacher doit toujours être entre les balises div.
    Dans mon exemple c'est un div spoil.

    Pour le style du bouton, si vous avez configuré un bouton déjà sur votre blog, le bouton MONTRER prendra le même style. Autrement, vous pouvez ajouter votre style. Mais n'oubliez pas d'indiquer la classe du style dans la fonction du bouton :

    <button onclick="toggle_visibility('spoil');" class="votre_classe_style"> MONTRER </button>

    Et le style vous rajoutez dans la feuille de style du blog.

    Menu Apparence - Modifier thème - Ajouter du CSS

    Par exemple :

    .spoil {
      background-color:#fff;
      padding:1em
    }
    .votre_classe_style {
      padding:.2em;
      font-weight:bold; 
      font-family: Arial, sans-serif;
      border: 1px solid black;
      background-color: #333;
    }
    


    Voilà, si vous avez des questions, n’hésitez pas! smile

    Lundi 3 Septembre à 20:56
    stormalo

    il est sympa ce petit code javascript. sarcastic

    ➤ J'apporte une info complémentaire pour la partie html :
    Pour utiliser deux fois ou plus ce code dans une même page il faut penser à ne pas mettre partout le même nom d'identifiant (spoil) car celui-ci doit être unique sur une même page-url. 
    Exemple pour trois utilisations :

    1. <button onclick="toggle_visibility('spoil1');">.....;
      <div id="spoil1" style=".....
      .............
    2. <button onclick="toggle_visibility('spoil2');">.....;
      <div id="spoil2" style=".....
      .............
    3. <button onclick="toggle_visibility('spoil3');">.....;
      <div id="spoil3" style="...
      .............

     

    Une simplification d'écriture possible sur Eklablog:

    var e = document.getElementById(id);  c'est pareil que : var e = $(id);

    Explications sur le blog de  -Thierry- , à cette adresse :
    http://gerer-mon-blog.eklablog.fr/script-et-selection-d-elements-en-javascript-a107718564

    Mardi 4 Septembre à 17:31
    DrCut

    Oui, il peut servir. smile

    Oui, vous avez raison, si on veut mettre plusieurs dans une page il faut changer de nom. yes

    On peut aussi ajouter différents styles de boutons dans la feuille de style CSS.

    Merci pour le blog et info complémentaire. ;)

    Mercredi 5 Septembre à 10:44
    Pipiou

    Bonjour,

    les spoilers n'ont qu'à bien se tenir he

    perso j'avais testé (et réussi !) l'insertion d'un spoiler directement DANS un article↗, en 2014, ça nous rajeunit pas ;)   ça me semble plus simple à faire (et plus sûr dans le temps ?) que le JS qui peut aussi générer des interactions variées selon les navigateurs.... (tu vois à quoi je pense stormalo ? wink2)  

    Mais c'est un joli truc pour faire plein de jolis spoilers  cool

    Merci.

     

    Mercredi 5 Septembre à 15:23
    stormalo

    @Pipiou

    Oui, ça ne rajeunit pas et ça explique sans doute un trou de mémoire.he

    Car le lien conduit à un article qui utilise lui aussi un code Javascript,  un peu comme celui de DrCut, mais en ciblant son action sur la première des class de l'élément contenant (d'après ma compréhension rudimentaire). Ce JS est dans l’article smile
    Si on souhaite deux "Voir le texte" l'un sous l'autre il faut rajouter un code JS avec une nouvelle indexation (ou réécrire le précédent si on sait faire)

    A mon avis celui de DrCut peut se placer n'importe ou (zone de script, module html, article ...) et on l'appelle dans le onclick en indiquant l'identifiant de la cible. Même si on rajoute des div en amont dans le même contenant, ce devrait être OK.
    Il me semble plus simple à utiliser clown

    Mercredi 5 Septembre à 16:46
    Pipiou

    ho j'ai honte !
    faut dire que j'ai pas vérifié, j'étais sûre que j'avais fait ça sans JS ! raté  he
    bon bin je sors ;) 

     

    Jeudi 6 Septembre à 19:47
    DrCut

    Merci pour vos interventions. cool
    Ce qui est dommage c'est que Dieu d'eklablog n'a pas ajouté un spoiler dans les options de "Répondre". Ce serait utile dans les commentaires pour des discussions libres. yes




    Vous devez être membre pour poster un message.