Afficher deux div au même endroit

**solo190** · 23/03/2017, 16h11

Bonjour a tous et toutes,
je suis sur un projet et je souhaite en ce moment faire afficher deux Div au meme endroit en fonction de la selection de l'utilisateur.
il y'a une liste et en fonction de la selection de l'utilisateur on lui affiche une div.
voici comment j'ai commencé mais je me rend compte que la div affiché n'occupe pas tout l'espace ce qui pose un probleme .

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
<div class="form-group">
    <label >Pick List </label>
    <select class="form-control" style="width:40%">
        <option>Groupes</option>
        <option>Saisir</option>
    </select>
</div>
<div class="form-group" id="liste_des_groupes" style="visibility:hidden">
    <label >Groups List </label>
    <select class="form-control" style="width:40%">
        <option>Groupes</option>
        <option>Saisir</option>
    </select>
</div>
<div class="form-group" id="liste_des_numeros" style="margin:auto">
    <label>Saisir les Numeros separés par des ; (point virgules)</label>
    <textarea class="form-control" rows="2" id="message" onkeyup="gestion_message_simple()"></textarea>
</div>

si la seconde div occupe tout l'espace avec une action du la liste je vais jouer sur le java script pour inverser les roles.
Merci d'avance pour votre soutient.

**badaze** · 25/03/2017, 12h14

Je n'ai pas compris ton problème. Mais au cas où...

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
 
<script>
function alterne() {
 
 if (document.getElementById('liste_des_groupes1').style.display == 'block') {
   document.getElementById('liste_des_groupes1').style.display = 'none';
   document.getElementById('liste_des_groupes2').style.display = 'block'; 
 } else {
   document.getElementById('liste_des_groupes2').style.display = 'none';
   document.getElementById('liste_des_groupes1').style.display = 'block';    
 }
 
}
</script>
<body>
<div class="form-group" id="liste_des_groupes1"style="display:block" >
    <label >Pick List </label>
    <select class="form-control" style="width:40%">
        <option>Groupes</option>
        <option>Saisir</option>
    </select>
</div>
<div class="form-group" id="liste_des_groupes2" style="display:none">
    <label >Groups List </label>
    <select class="form-control" style="width:40%">
        <option>Groupes</option>
        <option>Saisir</option>
    </select>
</div>
<div class="form-group" id="liste_des_numeros" style="margin:auto">
    <label>Saisir les Numeros separés par des ; (point virgules)</label>
    <textarea class="form-control" rows="2" id="message" onkeyup="gestion_message_simple()"></textarea>
</div>
<input type="button" value="Clique" onclick="alterne()" />
</body>

Afficher deux div au même endroit

JavaScript

Discussions similaires

Partager

Partager