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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager