Partage

afficher un div lors d'un clic sur un bouton

afficher/cacher un div

Sujet résolu
16 juin 2008 à 17:10:59

Bonjour, je souhaite cacher un div et l'afficher quand on clique sur le bouton d'un formulaire. :euh:
16 juin 2008 à 17:14:41

Bonjour,
tu dois utiliser le javascript. Et modifier le CSS de ta div comme ceci:

<div id="a_masquer">
   Contenu de la div en question.
</div>

<input type="button" value="Masquer" onclick="masquer_div('a_masquer');" />



function masquer_div(id)
{
  if (document.getElementById(id).style.display == 'none')
  {
       document.getElementById(id).style.display = 'block';
  }
  else 
  {
       document.getElementById(id).style.display = 'none';
  }
}


Et voilà je pense que ça fonctionne :)

FoeSteR `

EDIT: J'avais pas vu qu'il voulait le réafficher ;)
16 juin 2008 à 17:19:46

Là ça la masque seulement. Pour afficher/masquer en cliquant sur le même bouton le javascript c'est ça :
function masquer_div(id)
{
  if (document.getElementById(id).style.display == 'none') {
       document.getElementById(id).style.display = 'block';
  }
  else {
       document.getElementById(id).style.display = 'none';
  }
}
16 juin 2008 à 17:26:12

Bonjour bassiste,

Ce n'est pas très compliqué, je vais te donner le code.
Je te conseille cependant de t'informer sur le Javascript, tu pourra ensuite élaborer des codes par toi-même. Regarde ce tutorial.

Voici le code qui pourra t'aider :

<script type="text/javascript">
/* Voici la fonction javascript qui change la propriété "display"
pour afficher ou non le div selon que ce soit "none" ou "block". */

function AfficherMasquer()
{
divInfo = document.getElementById('divacacher');

if (divInfo.style.display == 'none')
divInfo.style.display = 'block';
else
divInfo.style.display = 'none';

}
</script>

/* La c'est le bouton qui va afficher le div en cliquant dessus. */ 
<input type="button" value="Afficher ou Masquer" onClick="AfficherMasquer()" />

/* Ca c'est le div en question qui possède l'id indiqué dans
la fonction. */
<div id="divacacher" style="display:none;"></div>


Voila ! ;) Amuse-toi bien ^^^^^^


EDIT : C'est le même principe que ceux qui on répondu avant, j'avais pas vu les réponses. Normalement tu devrais savoir comment faire là.
16 juin 2008 à 17:53:09

Merci beaucoup :)

Alors j'ai essayer les deux mais je préfère la première solution car on peut l'utiliser sur plusieurs div grace au paramètre.

Par contre comment faire pour qu'il soit masqué par défaut :euh:

edit: c'est bon je l'ai masqué par défaut ^^ il fallait faire :

<div id="a_masquer" style="display:none">
   Contenu de la div en question.
</div>
17 juin 2008 à 18:30:44

Tu as compris ! ^^

En effet avec le paramètre c'est plus pratique. Je t'avais donné le script pour un div mais effectivement si tu dois l'utiliser pour plusieurs ce n'est pas compliqué !

Bonne programmation pour la suite !
18 juin 2008 à 12:29:49

Donc c'est moi le meilleur :p
Pense à mettre ton post en résolu !
13 mars 2018 à 10:12:28

Bonjour jaimerai savoir comment on dait fdd
Staff 13 mars 2018 à 10:49:08

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention plus facilement.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster, demandez-vous si ce que vous allez dire apporte quelque chose au sujet. Si votre message n'apporte rien, vous ferez perdre du temps à tout le monde et le sujet pourrait dévier ou devenir difficile à suivre.

Aussi, vérifiez la date du topic. Le déterrage de topic nuit au bon fonctionnement du forum et est interdit. Utilisez les boutons pouce en haut pour dire merci. Si le topic date de plus de deux mois sans réponses, mieux vaut ne pas répondre. Si vous avez une question similaire, créez plutôt votre propre sujet en détaillant votre contexte

Je ferme ce topic.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!