Forum d'entraide TOWeb - Le logiciel de création de site web responsive
Retour au site lauyan.com

Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Avez-vous perdu votre courriel d'activation?
Identifiez-vous Inscrivez-vous Accueil du forum Aide sur le forum

Lancement de pagexl.com pour la création gratuite et facile de sites "one page" (page unique)

IMPORTANT: Avant de poster un message sur le forum n'oubliez pas :
1. d'effectuer une recherche sur le forum ainsi que dans l'aide en ligne TOWeb
2. de consulter les tutoriels vidéo sur YouTube et les dernières informations du blog de TOWeb
3. de consulter les tutoriels de Frangin62
+  Forum TOWeb
|-+  TOWeb
| |-+  Scripts & astuces pour votre site
| | |-+  Afficher/cacher un texte
« sujet précédent | | sujet suivant »
Pages: [1] Bas de page Imprimer
Auteur Fil de discussion: Afficher/cacher un texte  (Lu 1135 fois)
Boarding-Pass
Newbie
*

Nombre de "j'aime" : 0
Messages: 13



WWW
« le: 02 Janvier 2018 à 22h01 »

Bonjour,

Je souhaiterais avoir un bouton "Cliquer pour afficher" et avoir le texte qui s'affiche si l'on clique dessus.
Mon problème est que le texte s'affiche directement et je voudrais qu'il soit caché dès le chargement de la page.

Mon code est le suivant :

<style>
     
    div.spoiler
    {
        padding: 10px;
        width: 100%;
        border: 1px solid black;
        cursor: pointer;
         
        background-color: lightblue;
        display: none;
         
        padding: 3px;
        min-height: 1.25em;
    }
     
    div.spoilerDiv
    {
        width: 50%;
         
        margin-left: 10px;
        margin-right: auto;
    }
     
    div.contenuSpoiler
    {
        display: block;
    }
     
    .lienAfficher
    {
        text-decoration: none;
        cursor: hand;
        color: darkblue;
    }
     
    .lienAfficher:hover
    {
        text-decoration: underline;
    }
     
</style>
 
<script type="text/javascript">
     
    function ouvrirFermerSpoiler(div)
    {
        var divContenu = div.getElementsByTagName('div')[1];
         
        if(divContenu.style.display == 'block')
            divContenu.style.display = 'none';
        else
            divContenu.style.display = 'block';
    }
     
</script>
 
<div class="spoilerDiv" onclick="ouvrirFermerSpoiler(this);">
    <span class="lienAfficher">Cliquer pour afficher</span>
    <div class="spoiler">
        <div class="contenuSpoiler">
TEXTE
             
        </div>
    </div>
</div>
 


Sauriez-vous ce que je dois changer dans mon code svp ?
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 97
Messages: 2018



WWW
« Répondre #1 le: 03 Janvier 2018 à 13h57 »

Bonjour,
C'est un truc de ce genre que tu veux
http://jemontre62.free.fr/poubelle2/test.html        paragraphe 3

J'ai modifié un peu ton script, car non seulement le texte s'affiche tout de suite, mais le bouton ne fait rien quand on arrive à cacher le texte

<style>
     .spoiler
    {
        padding: 10px;
        width: 90%;
        border: 1px solid black;
        cursor: pointer;
         background-color: lightblue;
        display: none;
         padding: 3px;
        min-height: 1.25em;        
    }
</style>
 
<script type="text/javascript">
function ouvrirFermerSpoiler()
{
divContenu = document.getElementById('montexte');
if (divContenu.style.display == 'none')
divContenu.style.display = 'block';
else
divContenu.style.display = 'none';
}
</script>


<a style="color:darkblue;" href="javascript:ouvrirFermerSpoiler();">Cliquer pour afficher</a><br />

<button type="button" onclick="ouvrirFermerSpoiler();">Cliquer pour afficher</button>

<div class="spoiler" id="montexte" style="display:none;">
CECI EST LE TEXTE A AFFICHER
            
</div>

J'ai mis 2 styles de boutons, tu choisis, le texte <a style.....> ou le bouton <button.....>

Cdlt
frangin62

Edit : Autrement, tu peux aussi afficher du texte dans une fenêtre en surimpression en cliquant sur un lien TOWeb
« Dernière édition: 03 Janvier 2018 à 14h04 par frangin62 » Journalisée

Boarding-Pass
Newbie
*

Nombre de "j'aime" : 0
Messages: 13



WWW
« Répondre #2 le: 03 Janvier 2018 à 17h43 »

Un grand MERCIIIIII !!!

C'est exactement ce que je voulais!!! Merci de ton aide !!
Journalisée
Boarding-Pass
Newbie
*

Nombre de "j'aime" : 0
Messages: 13



WWW
« Répondre #3 le: 04 Janvier 2018 à 14h40 »

Bonjour,

En fait j'ai de nouveau un problème...

Je souhaite mettre différentes fiches dans un même paragraphe.
Au niveau de la description de la fiche n°1, je voudrais mettre mon code script contenant mon texte n°1 à afficher.
Au niveau de la description de la fiche n°2, je voudrais mettre mon code script contenant mon texte n°2 à afficher.
etc...

Le problème est que mon code fonctionne uniquement pour la fiche n°1 et que lorsque je souhaite afficher le texte de la fiche n°2, c'est le texte de la fiche n°1 qui s'affiche (et c'est la fiche n°1 qui réagit).

J'ai essayer de contourner ce problème en séparant les fiches dans différents paragraphes mais le problème reste inchangé.

Voici le lien de mon site que je publie avec le pb pour que vous puissiez mieux comprendre
http://boarding-pass.fr/indonesie-java-bali-gili-lombok.html

Help me please !!!

« Dernière édition: 04 Janvier 2018 à 14h44 par Boarding-Pass » Journalisée
Boarding-Pass
Newbie
*

Nombre de "j'aime" : 0
Messages: 13



WWW
« Répondre #4 le: 04 Janvier 2018 à 14h43 »

http://boarding-pass.fr/indonesie-java-bali-gili-lombok.html
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 97
Messages: 2018



WWW
« Répondre #5 le: 04 Janvier 2018 à 15h10 »

Bonjour,
en effet c'est plutôt embêtant  Clin d'oeil

Je suppose que tu as créé autant de champs que nécessaire, il va donc falloir indexer quelques éléments dans chacun des scripts.

remplace les X  par 1,  2,  3 ..........dans les scripts

<script type="text/javascript">
function ouvrirFermerSpoilerX()
{
divContenu = document.getElementById('montexteX');
if (divContenu.style.display == 'none')
divContenu.style.display = 'block';
else
divContenu.style.display = 'none';
}
</script>


<a style="color:darkblue;" href="javascript:ouvrirFermerSpoilerX();">Cliquer pour afficher</a><br />


<div class="spoiler" id="montexteX" style="display:none;">
CECI EST LE TEXTE Num X A AFFICHER
             
</div>

tu peux voir le résultat    http://jemontre62.free.fr/poubelle2/test.html
Journalisée

Boarding-Pass
Newbie
*

Nombre de "j'aime" : 0
Messages: 13



WWW
« Répondre #6 le: 04 Janvier 2018 à 15h23 »

Trop fort Frangin62!!! merci beaucoup!!!

J'avais uniquement fait des différences au niveau  de 'mon texteX" mais pas de function ouvrirFermerSpoilerX()

Maintenant cela fonctionne comme je le souhaitais !!
Journalisée
Pages: [1] Haut de page Imprimer 
« sujet précédent | | sujet suivant »
Aller à:  


TOWeb - Le logiciel de création de site Internet responsive Cliquez ici pour vous abonner au flux RSS du forum Règles du Forum  -   © 2005-2013 Lauyan Software
Powered by SMF 1.1.18 | SMF © 2006-2009, Simple Machines