Sujet Précédent Sujet Suivant

[javascript] Apparition de div

Résolu/Fermé
ben85350 Messages postés 610 Date d'inscription vendredi 30 mai 2008 Statut Membre Dernière intervention 2 avril 2013 - 20 oct. 2008 à 23:19
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 - 21 oct. 2008 à 20:58
Bonsoir ou rebonsoir ,
j'ai créer une page web dans laquelle une div est caché (display: none).
J'aimerai quand cliquant sur un bouton du genre Afficher cette div apparaisse 

<html>
    <head>.............</head>
    <body>
     .......................
     ..................
     <input type="button" value="Afficher" onClick ...et la je voit pas trop quoi mettre >
     <div style="display: none;">
        les éléments de ma div ....
    </div>

    </body>
</html>

Il faudrait en quelque sorte que la valeur de display change après le click. Utilisation de php ?
Merci de vos réponses !
A voir également:

4 réponses

Réponse 1 / 4
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 220
21 oct. 2008 à 10:24
PHP n'a rien a voir la dedans. Ne confond pas langage interprété côté serveur ou client.

Pour cela tu créés une fonction javascript, qui t'affichera ton div lors du click sur un bouton.

Cela donnerait : 

<html>
<head>
<script language="javascript" type="text/javascript">

function affiche_div()
{
     document.getElementById(ma_div).style.visibility='visible';
}

</script>
</head>

<body>
<input type="button" value="Afficher" onClick="affiche_div()" />
     <div id='ma_div' style="visibility : hidden;">
        les éléments de ma div ....
    </div>
</body>
</html>
2
Réponse 2 / 4
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
21 oct. 2008 à 11:24
et voila un autre exemple avec plusieur div cachees appelees par getElementById

tu ajoute autant de div cache que tu veux ! N OUBLIE PAS DE LES NOTIFIER DANS LES Array du js 

var subs_array = new Array("sub1","sub2","sub3");
sub 4, sub5 ect ect ect 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">  
<head>             
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">             
  <title>RAD ZONE Webcreation         
  </title>             
  <meta name="author" content="http://radservebeer.free.fr">             
  <meta name="generator" content="PSPad editor, www.pspad.com">    
<script type="text/javascript">
//<!-- Begin
var subs_array = new Array("sub1","sub2","sub3");
function displaySubs(the_sub){
        if (document.getElementById(the_sub).style.display==""){
        document.getElementById(the_sub).style.display = "none";return
  }
  for (i=0;i<subs_array.length;i++){
        var my_sub = document.getElementById(subs_array[i]);
        my_sub.style.display = "none";
        }
  document.getElementById(the_sub).style.display = "";
  }
//  End -->
</script>                       
</head>        
<body>                       
  <div align="center">      
    <input type="button" value="Afficher"  onclick="displaySubs('sub1')">                               
    <div class="para" id="sub1" style="display:none">                                               
      <p>Lorem ipsum dolor sit amet consectetuer mus in malesuada ut laoreet. Tempus et nonummy sed In Pellentesque sem tincidunt Pellentesque lobortis sit. Elit quis a ullamcorper dis Quisque pellentesque lacus Maecenas interdum elit. Ipsum turpis leo lacinia ut egestas ut est velit urna libero. Neque Vestibulum Nam vitae dolor nunc Aenean at quam est molestie. At interdum congue elit.       
      </p>      
      <p>Vitae eleifend tellus hendrerit lacinia in eros laoreet justo id Vestibulum. Sem nec justo Donec Nam natoque magnis urna id felis Morbi. Pellentesque arcu pede Pellentesque justo at wisi justo Praesent mauris semper. Sagittis a quis cursus ante mi egestas risus lacinia Vestibulum laoreet. Nisl Vestibulum semper Ut cursus faucibus pede felis leo Aenean vitae. Sodales nulla leo id Lorem Nam elit fames Aenean porta Curabitur. Id accumsan Aliquam.       
      </p>      
      <p>Vitae sed Vestibulum orci ut habitant justo ut Pellentesque Sed interdum. In sit porttitor enim urna Nulla ultrices justo ultrices egestas nulla. Tortor eu nibh consequat ac a tellus augue Lorem ligula interdum. Hendrerit ut urna Curabitur Nam habitasse In et volutpat magna vitae. Semper rhoncus commodo felis mauris dictum leo.       
      </p>      
      <p>Integer quis nunc nunc sed porttitor interdum est ut nibh habitasse. Dolor semper nascetur risus facilisi et urna porttitor Quisque enim et. Libero est Cum Nulla elit turpis et id dolor Maecenas amet. Nascetur Curabitur condimentum Vestibulum ligula nunc ac dui sem id Sed. Consequat tortor tellus id tempor odio commodo neque non neque In. Donec et auctor felis lacus sed.       
      </p>                        
    </div>                                   
    <p>        
      <input type="button" value="Afficher 2"  onclick="displaySubs('sub2')">                                                                    
    </p>                                   
    <div class="para" id="sub2" style="display:none">                                               
      <p>Lorem ipsum dolor sit amet consectetuer accumsan ut cursus Nunc lacus. Est metus elit gravida In ornare In Mauris semper sit risus. Odio nec leo pellentesque risus nunc morbi ac pretium eget eget. Elit pellentesque non ac Phasellus magna elit ut tincidunt risus urna. Enim parturient quis magna nonummy convallis mollis convallis.       
      </p>      
      <p>Tincidunt nibh Nulla Sed dui mauris parturient semper sapien dolor nunc. Lobortis Nulla nec ut dignissim amet elit euismod Nunc urna Nullam. Enim porttitor egestas interdum mauris leo justo porttitor felis magna nonummy. Turpis justo Integer nulla Ut dui Nulla in nunc Maecenas et. Vel vel feugiat nibh tellus Pellentesque wisi feugiat magna auctor condimentum. Laoreet eleifend facilisis Aenean mi ipsum wisi.       
      </p>      
      <p>Pharetra congue Vestibulum Morbi cursus est sed interdum eu tempor leo. Feugiat leo id feugiat amet fermentum semper congue non magna congue. Suscipit a id Vestibulum Quisque tempus montes magnis Donec urna natoque. Laoreet tincidunt dignissim facilisis amet est massa volutpat fermentum mattis et. Lacus urna Ut Vestibulum Nulla nibh sem tellus.       
      </p>      
      <p>Eget turpis wisi pretium ligula tempor ullamcorper porttitor vel orci Ut. Lacus fermentum et Phasellus venenatis libero felis eros lorem porttitor Fusce. Libero dolor Phasellus Nam tincidunt eget nec orci pulvinar ut ipsum. Odio id platea pharetra in elit mattis Curabitur congue In wisi. Est ut Morbi quis feugiat enim.       
      </p>      
      <p>Quisque sollicitudin dui urna tempus nunc malesuada quis tellus felis orci. Scelerisque senectus et congue ac Donec porta mauris id eget id. Pellentesque justo volutpat magnis neque dignissim vel mauris eget Curabitur penatibus. Est id elit Curabitur Ut lorem elit in penatibus et pulvinar. Pharetra tellus massa tempus sed et mi porttitor risus nibh justo. Ipsum nibh consectetuer laoreet.       
      </p>      
      <p>Nibh et orci sed ipsum vitae mollis est ligula dictumst pretium. Id risus et senectus vel Nam convallis quis pretium lorem nibh. Ut montes sed convallis dis lacus semper ipsum ligula nibh egestas. Sed malesuada amet sodales purus ac Praesent Curabitur urna ante eleifend. Id elit Sed a enim quam Morbi In consequat laoreet nec. Gravida lobortis Sed eget consequat sodales tempor tincidunt Nam Duis laoreet. Accumsan.       
      </p>      
    </div>                                   
    <p>                                               
      <a href="javascript:void(0)" class="headings" onclick="displaySubs('sub3')" onfocus="if(this.blur)this.blur()"><strong>Click Pour voir du TEXTE</strong></a>                                   
    </p>                                   
    <div class="para" id="sub3" style="display:none">Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.                              
      <br> Li nov lingua franca va esser plu simplic e regulari quam.                                    
    </div>                                     
  </div>        
</body>
</html>


RAD
1
bg62 Messages postés 23653 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 5 novembre 2024 2 385
21 oct. 2008 à 11:57
hé ..... ben mon 'RAD'... t'es là ??? je te croyais à .... km ...
serait peut-être temps que tu la ramènes ici car les "p'tits nouveaux" ... dur dur ....
@+
b g
-1
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360 > bg62 Messages postés 23653 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 5 novembre 2024
21 oct. 2008 à 12:03
SALUT Bg :-))

je suis la sans y etre !! juste un petit passage eclair :-))

A+

RAD
-1
Réponse 3 / 4
bg62 Messages postés 23653 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 5 novembre 2024 2 385
21 oct. 2008 à 12:24
ce qui veut dire ??? tu as quand même réussi ce que tu voulais ? (mp ????)
@+
b g
-1
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
21 oct. 2008 à 12:28
encore 1mois et ca devrais le faire ;-))
-1
ben85350 Messages postés 610 Date d'inscription vendredi 30 mai 2008 Statut Membre Dernière intervention 2 avril 2013 27 > RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024
21 oct. 2008 à 19:50
Merci pour votre aide ca fonctionne.
Juste une petite modification : 

function affiche_div()
{
     document.getElementById('ma_div').style.visibility='visible';
}

ca ne fonctionne pas sans les simples quotes.
-1
Réponse 4 / 4
papymucho Messages postés 140 Date d'inscription mercredi 18 juin 2008 Statut Membre Dernière intervention 1 novembre 2009 220
21 oct. 2008 à 20:58
ah oui exact, j'ai tapé un peu vite désolé ;-)
-1

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
erreur (#DIV/0) formule MOYENNE.SI.ENS
sara-87 -
sara-87 -

5 réponses