IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Fonction afficher/cacher


Sujet :

CSS

  1. #1
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2014
    Messages : 10
    Points : 6
    Points
    6
    Par défaut Fonction afficher/cacher
    Bonjour à tous !

    Je rencontre un petit problème avec mon blog (j'utilise blogger)
    La fonction afficher/cacher fonctionne bien quand on clique dessus mais le problème vient du fait que même quand le texte est sensé être caché, il occupe tout de même de l'espace sur la page.
    Il y a donc un grand espace blanc entre la phrase sur laquelle on clique "afficher le texte" et la suite de l'article

    Voici des captures d'écran :

    Ce que l'on voit au départ :
    Nom : Capture d’écran 2014-10-24 à 17.37.25.png
Affichages : 175
Taille : 25,4 Ko
    _______________________________________________

    Quand on clique sur "afficher le texte" :

    Nom : Capture d’écran 2014-10-24 à 17.38.57.png
Affichages : 171
Taille : 77,3 Ko
    _______________________________________________

    Voici ce que j'ai mis dans la balise head de mon template :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
        <script type='text/javascript'>
          //<![CDATA[
          // 
          function afficher_cacher(id)
          {
            if(document.getElementById(id).style.visibility=="hidden")
            {
              document.getElementById(id).style.visibility="visible";
              document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
            }
            else
            {
              document.getElementById(id).style.visibility="hidden";
              document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
            }
            return true;
          }
          //]]>
        </script>

    Voici le CSS que j'ai mis dans le template également :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .bouton
    {
    color:#0000ff;
    font-size:24px;
    cursor:pointer;
    }
    .bouton:hover
    {
    text-decoration:underline;
    }
    .texte
    {
    border:1px solid #333333;
    background:#eeeeee;
    padding:10px;
    color:#333333;
    }
    .texte:hover
    {
    border:1px solid #000000;
    background:#cccccc;
    color:#000000;
    }
    Voici le code que j'insère dans mon article :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span>
        <div id="texte" class="texte">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
     
        </div>
        <script type="text/javascript">
        //<!--
            afficher_cacher('texte');
        //-->
        </script>
     
    Bonjour,
     
    Dans cet article je vais partager avec vous des idées pour les séjours à l'étranger !

    Merci d'avance pour votre aide,

    Bonne journée !

  2. #2
    Expert éminent Avatar de CosmoKnacki
    Homme Profil pro
    Justicier interdimensionnel
    Inscrit en
    Mars 2009
    Messages
    2 848
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Justicier interdimensionnel

    Informations forums :
    Inscription : Mars 2009
    Messages : 2 848
    Points : 6 535
    Points
    6 535
    Par défaut
    Au lieu d'utiliser la propriété css visibility, utilise plutôt la propriété display en la faisant passer de none à block et vice versa.
    Brachygobius xanthozonus
    Ctenobrycon Gymnocorymbus

  3. #3
    Futur Membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2014
    Messages : 10
    Points : 6
    Points
    6
    Par défaut
    Bonjour,

    Merci pour la réponse rapide, je viens de faire la modification dans mon code et tout est parfait maintenant !

    Bonne fin de journée !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher/Cacher une div en fonction d'une ligne
    Par student_php dans le forum jQuery
    Réponses: 0
    Dernier message: 13/11/2011, 11h55
  2. Fonction afficher cacher element avec display:block
    Par babyboy6492 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 17/11/2010, 14h47
  3. Réponses: 6
    Dernier message: 27/08/2009, 16h16
  4. Réponses: 0
    Dernier message: 09/09/2008, 22h53
  5. Afficher/cacher des éléments de type select en fonction d'autres
    Par GLDavid dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 05/04/2006, 11h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo