Faire apparaître un <div> à la place d'un autre

**skyangel20** · 29/12/2007, 09h42

Salut à tous

Je cherche le moyen de faire apparaitre un <div> à la place d'un autre...

Je vous explique

: Dans ma page php j'ai une <div id='info1'> dans laquelle sont placées des infos, au moment du click sur un bouton appartennnant à ce <div id='info1'> je veux qu'un autre <div id='info2'> apparaisse mais en prenant la place du premier (et non en s'affichant en dessous)

Quelqu'un autait'il une solution

Merci bp d'avance

**jln13** · 29/12/2007, 12h12

salut,

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
 
<html>
<head>
<script type="text/javascript">
function traitement()
{
	divAchanger = document.getElementById('info1').innerHTML;
	document.getElementById('info1').innerHTML = '<div id="info2">'+divAchanger+'</div>';
}
</script>
</head>
<body>
 
<div id='info1'>
	Texte libre
	<input type="button" onclick="traitement()" value="switch" />
</div>
</body>
</html>

**Auteur** · 29/12/2007, 15h44

Envoyé par skyangel20

Je vous explique

: Dans ma page php j'ai une <div id='info1'> dans laquelle sont placées des infos, au moment du click sur un bouton appartennnant à ce <div id='info1'> je veux qu'un autre <div id='info2'> apparaisse mais en prenant la place du premier (et non en s'affichant en dessous)

Quelqu'un autait'il une solution

bonjour,

joue avec la propriété display :

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function afficherDiv()
{
    document.getElementById("info1").style.display = "none";
    document.getElementById("info2").style.display = "block";
}
 
//-->
</script>
 
</head>
 
<body>
 
<div id="info1">
    bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla<br />
    <input type="button" value="cliquez ici" onclick="afficherDiv()" />
</div>
 
<div id="info2" style="display: none">
    <b>un autre</b> bla bla <i>un autre</i> bla bla <u>un autre</u> bla bla
    <b>un autre</b> bla bla <i>un autre</i> bla bla <u>un autre</u> bla bla
    <b>un autre</b> bla bla <i>un autre</i> bla bla <u>un autre</u> bla bla
    <b>un autre</b> bla bla <i>un autre</i> bla bla <u>un autre</u> bla bla
</div>
 
<div>
<br /><br /><br /><br />
</div>
 
<div>
    ici le reste de la page ici le reste de la page ici le reste de la page
    ici le reste de la page ici le reste de la page ici le reste de la page
</div>
 
</body>
 
</html>

**MarsVolta** · 09/01/2008, 13h22

Bonjour,
Merci pour tes codes j'aurais cependant une petite question est t'il possible d'afficher les deux balises DIV puis qd on clic sur le bouton la seconde prend la palce de la 1ere ? parce que avec ton code le deuxieme DIV n'est pas afficher.

J'ai essayé de jouer avec les display mais pas assez apparement

Merci d'avance pour ta réponse

**E.Bzz** · 09/01/2008, 13h45

Envoyé par MarsVolta

J'ai essayé de jouer avec les display mais pas assez apparement

Normallement, il suffit d'ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

style="display:block;"

dans le tag initial de info1 ...

A+

**MarsVolta** · 09/01/2008, 14h21

Ok merci pour ta réponse je cours essayé ^^

**MarsVolta** · 09/01/2008, 14h48

Euh

j'ai un petit problème

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>       
  <head>           
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">           
    <meta name="generator" content="PSPad editor, www.pspad.com">             
    <title>             
    </title>  
<script type="text/javascript">
<!--
function afficherDiv()
{
    document.getElementById("page1").style.display = "none";
    document.getElementById("page2").style.display = "block";
}
 
//-->
</script>                       
    <style type="text/css">      
      <!--
            .conteneur {
            	background-image: url(../../img/fond-elevage-exemplaire.jpg);
            	background-repeat: no-repeat;
            	background-position: center center;
            	height: 570px;
            	width: 1600px;
            }
            -->    
    </style>    
    <link href="../../styles/essai3.css" rel="stylesheet" type="text/css" />    
    <style type="text/css">      
      <!--
            body {
            	background-image: url(../../img/fond.gif);
            }
            -->    
    </style>	              
  </head>     
  <body>           
    <div class="conteneur">               
      <div id="page1" style="display:block" align="justify" >                   
        <div>                               
          <span class="page1">&nbsp;&nbsp;&nbsp;&nbsp;Au tout début des années 1990,  lassés de voir les produits de leurs élevages se “perdre” dans une  commercialisation peu valorisante, un groupe d’éleveurs décide de retrouver le  goût et la qualité de la viande élevée selon les méthodes traditionnelles des  montagnes catalanes.                 
          </span>                
          <span class="page1"><br />                    <br />                    &nbsp;&nbsp;&nbsp;&nbsp;“Un élevage en accord avec la  nature”, “Le goût de la liberté”, “Un retour aux sources”... lorsqu’on on se  penche sur la revue de presse ayant présidé au lancement de la Rosée des Pyrénées, c’est en  ces termes que sont évoqués le mode d’élevage et la saveur de la viande  produite.<br />                                     
          </span>                
          <span class="noir10">&nbsp;&nbsp;&nbsp;&nbsp;                 
          </span>                
          <span class="page1"><br />                    &nbsp;&nbsp;&nbsp;&nbsp;Très vite il est apparu que pour  être reconnue, cette démarche devait être placée sous certification. Ce qui implique  un cahier des charges précis, des contrôles permanents tant sur les  exploitations que sur les estives et chez les distributeurs : la Rosée des Pyrénées doit  toujours être accompagnée de son Certificat d’Origine précisant son identité et  sa provenance.                 
          </span><br />                    <br />                    </td>                                                
        </div>                          
      </div>                 
      <div id="page2" style="display: block" align=justify">                     
        <div class="texte1">                         
          <span class="page2">&nbsp;&nbsp;&nbsp;&nbsp;Tous ceux qui ont participé à  cette renaissance sont en droit d’être fiers de la pérennité et de la justesse  de cette démarche : un élevage au plus près de la nature, qui a permis de  traverser toutes les crises liées à la production, parfois irraisonnée, de la  viande bovine et les aberrations que cela entraîné. L’épisode de l’ESB et ses  conséquences dramatiques ont conforté le bien fondé de la démarche. <br />                         
          </span>          
          <span class="noir10">&nbsp;&nbsp;&nbsp;&nbsp;                 &nbsp;           
          </span>          
          <span class="page2"><br />                  &nbsp;&nbsp;&nbsp;&nbsp;La Rosée des Pyrénées,  pionnière il y a quinze ans est aujourd’hui “dans l’air du temps” si l’on se  réfère aux interrogations qui se posent sur la qualité de notre alimentation. Rappelons que La Rosée des Pyrénées est un veau &eacute;lev&eacute; avec sa m&egrave;re, nourri exclusivement au lait maternel et &agrave; l'herbe des pâturages de montagne.<br />                             
          </span>          
          <span class="noir10">&nbsp;&nbsp;&nbsp;           
          </span>          
          <span class="page2"><br />              &nbsp;&nbsp;&nbsp;&nbsp;Preuve, s’il en était besoin, que l’élevage respectueux des animaux, des  hommes et de l’environnement a pleinement sa place dans le paysage agricole de  notre département et, au-delà, de nos territoires européens. <br />                                     
          </span>                                                
        </div>                 
      </div>           
    </div>                    
    <input type="button" value="cliquez ici" onclick="afficherDiv()" />     
  </body>
</html>

Voilà mon code je n'arrive pas à faire ce que je veux le but est d'avoir deux textes cote à cote quand la page s'affiche et quand je clique sur le bouton le texte de droite prend la place de celui de gauche j'ai tout positionner à l'aide du css normalement... merci d'avance pour ton aide

**jln13** · 10/01/2008, 13h42

salut,

c'est un probleme de css du coup. Il faudrait donc que tu mettes le contenu de ce fichier css :

**MarsVolta** · 10/01/2008, 15h03

Bonjour merci pour votre aide mais j'ai toujours le meme problème à savoir afficher le "contenant_droite" à la place du "contenant_gauche" voici le code

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>          
  <head>                
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">                
    <meta name="generator" content="PSPad editor, www.pspad.com">                  
    <title>                  
    </title>  
<script type="text/javascript">
<!--
function afficherDiv()
{
    document.getElementById("contenant_gauche").style.display = "none";
    document.getElementById("contenant_droite").style.display = "block";
}
 
//-->
</script>                            
    <style type="text/css">             
      <!--
                  .fond_elevage {
                  	background-image: url(../../img/fond-elevage-exemplaire.jpg);
                  	background-repeat: no-repeat;
                  	background-position: center center;
                  	height: 570px;
                  	width: 1600px;
                  }
                  -->         
    </style>         
    <link href="../../styles/essai3.css" rel="stylesheet" type="text/css" />         
    <style type="text/css">             
      <!--
                  body {
                  	background-image: url(../../img/fond.gif);
                  }
                  -->         
    </style>	                 
  </head>          
  <body>         
    <div class ="fond_elevage"> 
      <div id="contenant_gauche" style="display: block>
            <div class="themeparonglet">
 
            </div>
              <div class="sousmenu">
 
              </div>
 
                <div class="contenu_gauche" >
                  <div class="contenu_gauche1">
 
                  </div>
 
                  <div class="contenu_gauche2" align="justify">
                  <span class="texte">&nbsp;&nbsp;&nbsp;&nbsp;Au tout début des années 1990,  lassés de voir les produits de leurs élevages se “perdre” dans une  commercialisation peu valorisante, un groupe d’éleveurs décide de retrouver le  goût et la qualité de la viande élevée selon les méthodes traditionnelles des  montagnes catalanes.</span><span class="texte"><br />
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;“Un élevage en accord avec la  nature”, “Le goût de la liberté”, “Un retour aux sources”... lorsqu’on on se  penche sur la revue de presse ayant présidé au lancement de la Rosée des Pyrénées, c’est en  ces termes que sont évoqués le mode d’élevage et la saveur de la viande  produite.<br />
                    </span><span class="noir10">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="texte"><br />
                    &nbsp;&nbsp;&nbsp;&nbsp;Très vite il est apparu que pour  être reconnue, cette démarche devait être placée sous certification. Ce qui implique  un cahier des charges précis, des contrôles permanents tant sur les  exploitations que sur les estives et chez les distributeurs : la Rosée des Pyrénées doit  toujours être accompagnée de son Certificat d’Origine précisant son identité et  sa provenance.</span><br />
                    <br />
                  </div>
 
                </div>
 
                </div>
                <div id="contenant_droite" style="display: block">
                  <div class="themeparonglet2">
 
                  </div>
                    <div class="sousmenu2">
 
                     </div>
 
                      <div class="contenu_droite">
                        <div class="contenu_droite1">
                         <img src="../../img/includes/dia2.jpg" alt=" " width="370" height="475">
                        </div>
 
                          <div class="contenu_droite2" align="justify">
                            <span class="texte">&nbsp;&nbsp;&nbsp;&nbsp;Tous ceux qui ont participé à  cette renaissance sont en droit d’être fiers de la pérennité et de la justesse  de cette démarche : un élevage au plus près de la nature, qui a permis de  traverser toutes les crises liées à la production, parfois irraisonnée, de la  viande bovine et les aberrations que cela entraîné. L’épisode de l’ESB et ses  conséquences dramatiques ont conforté le bien fondé de la démarche. <br />
              </span><span class="noir10">&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;</span><span class="texte"><br />
                  &nbsp;&nbsp;&nbsp;&nbsp;La Rosée des Pyrénées,  pionnière il y a quinze ans est aujourd’hui “dans l’air du temps” si l’on se  réfère aux interrogations qui se posent sur la qualité de notre alimentation. Rappelons que La Rosée des Pyrénées est un veau &eacute;lev&eacute; avec sa m&egrave;re, nourri exclusivement au lait maternel et &agrave; l'herbe des pâturages de montagne.<br />
                  </span><span class="noir10">&nbsp;&nbsp;&nbsp;</span><span class="texte"><br />
              &nbsp;&nbsp;&nbsp;&nbsp;Preuve, s’il en était besoin, que l’élevage respectueux des animaux, des  hommes et de l’environnement a pleinement sa place dans le paysage agricole de  notre département et, au-delà, de nos territoires européens. <br />
                          </span>  
                          </div>
                        </div>
 
 
       </div>
    <input type="button" value="cliquez ici" onclick="afficherDiv()" />
  </div>
 
 
 
 
  </body>        
</html>

merci d'avance pour votre aide

**E.Bzz** · 10/01/2008, 15h07

Oui mais c'est le contenu de essai3.css que demandait, à juste titre, jln13

A+

**MarsVolta** · 10/01/2008, 15h12

Arf désoler

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
@charset "utf-8";
/* CSS Document */
/*balises importante*/
html{
height:100%
}
 
.clear{
clear:both;
}
 
/* balise DIV de gauche */
#contenant_gauche{
	position:absolute;
	top: 10px;
	left: 10px;
	height: 570px;
	width: 800px;
}
 
/* balise gauche de menu*/
 
.themeparonglet{
	position:absolute;
	top: 10px;
	left: 10px;
	height: 35px;
	width: 800px;
}
 
.sousmenu{
	position:absolute;
	top: 40px;
	left: 10px;
	height: 38px;
	width: 800px;
}
 
/*balise de contenu gauche*/
 
 
.contenu_gauche{
	position:absolute;
	top:81px;
	left:10px;
	height :497px;
	width: 800x;
}
 
.contenu_gauche1{
	position:absolute; 
	top:0px; 
	left:0px;
	height:466px;
	width:348px;
}
 
.contenu_gauche2{
	position:absolute;
	top:0px;
	left:380px;
	height: 466px;
	width:403px;
}
 
/* balise DIV de droite */
#contenant_droite{
position:absolute;
	top: 12px;
	left: 835px;
	height: 570px;
	width: 800px;
	}
 
/*balise de contenu droite*/
.themeparonglet2{
position:absolute;
	top: 10px;
	left: 0px;
	height: 35px;
	width: 800px;
	}
 
.sousmenu2{
position:absolute;
	top: 40px;
	left: 0px;
	height: 38px;
	width: 800px;
}
 
 
.contenu_droite{
	position:absolute;
	top: 10px;
	height: 570px;
	width: 800px;
	float: left;
}
 
.contenu_droite1{
	position:absolute;
	top:67px;
	height:466px;
	width:348px;
	float: left;
}
 
.contenu_droite2{
	position:absolute;
	top:67px;
	height: 454px;
	width:403px;
	float: left;
	left: 367px;
}
 
 
/*police de caracteres*/
.noir10 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666600;
	text-decoration: none;
	font-weight: bold;
}
 
.texte {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 22px;
	color: #626200;
	text-decoration: none;
	text-align: justify;
}
/*suite*/

voilà

**E.Bzz** · 10/01/2008, 15h16

Il faut (au moins, mais pas sû que ça suffise) enlever les "position:absolute" de tes contenant.
Sinon, il sont sortis du flux et le décalage ne se fera pas tout seul.

Sinon, tu peux changer les coordonnées pour afficher le 2° à la place du 1° (ceci en restant en absolute).

A+

**MarsVolta** · 10/01/2008, 15h37

Salut merci pour ta réponse comme tu le dis en changeant juste les absolute ça marche pas, encore moins même, tous mes div sont décalés

j'opterai bien pour ta seconde solution mais tu fais comment pour changer les coordonnées ?

Merci d'avance pour ton aide précieuse

**jln13** · 10/01/2008, 19h48

salut,

a priori il faut que tu repositionne la div droite a la place de la gauche apres avoir caché ton conteneur gauche.
Je pense qu'en jouant sur l'attribut left ca devrait marcher :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
function afficherDiv()
{
          document.getElementById("contenant_gauche").style.display = "none";
          document.getElementById("contenant_droite").style.display = "block";
          document.getElementById("contenant_droite").style.left = "10px";
}

Edit : tu as oublié de fermer la parenthèse aussi la :

**MarsVolta** · 11/01/2008, 09h11

Ok merci pour ton aide précieuse ^^

Faire apparaître un <div> à la place d'un autre

JavaScript

Discussions similaires

Partager

Partager