Discussion :

[cycycysisisi]

Bonjour,


Je suis en train de développer un site en html et css.

Mon objectif est d'avoir plusieurs volets déroulants qui s'ouvrent en fonction des choix de l'utilisateur.

Voici l'état actuel de mon code php

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
<div id="volet1" class="volet">
	<h1>Titre</h1>
</div>
<br><br><br>
<div id="volet">
 
 
</form>
 <form id="start"  action="choice.php" method="post">
 
	<h1>Titre</h1>
 
 <label for="choix">Je veux </label>
  <select name="utilise" id="utilise" >
 <option value="Supprimer"> Supprimer</option>
   <option value="Activer"> Activer</option>
   <option value="Désactiver"> Désactiver</option>	
   <option value="Ajouter au compte Rézo"> Désactiver</option>
   <option value="Mettre Ã* jour les macs"> Désactiver</option>
 
 
   </select>
</p>
	<p>
		<label for="id">Id</label>
		<input name="id" id="id" type="text" required  />
	</p>
 
	<p>
		<label for="mdp">mon mot de passe est</label>
		<input name="mdp" required id="mdp" type="password" >
	</p>
<p>
		<input type="submit" href="#finish" > ou <input value="reset"  type=reset  href="#start">
	</p>
 
</div>
 
	<div id="finish">
		<p>
			<a href="../test.php"></a>
			Inscription termin&eacute;e!
		</p>
	</div>
</form>

et le CSS du volet

Code css :

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
.volet {
    width: 440px;
    padding: 10px;
}
.volet a.ouvrir {
    padding: 10px 25px;
    background:#455164;
    color: #fff;
    text-decoration: none;
}
.volet {
    position: relative;
    left: -520px; top: 40px;
}
.volet a.ouvrir {
    position: absolute;
    right: -88px;
    top: 150px;
 
    /* quelques styles CSS3 */
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
 
    border-radius: 0 0 8px 8px;
}
 
:required
{
	   background-color: red;
}
 
.volet {
    -webkit-transition: all .5s ease-in;
    transition: all .5s ease-in;
}
.volet:target {
    left: 0;
}
.volet_clos:target .volet {
    /* retourne Ã* ta place */
}
.volet a.ouvrir,
.volet a.fermer {
    /* les styles donnés précédemment */
}
.volet a.fermer {
    display: none;
}
.volet_clos:target .volet {
    left: -270px;
}
.volet:target a.ouvrir {
    display: none;
}
.volet:target a.fermer {
    display: block;
}

J'essaye avec

Code :

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

1
2
<a href="#volet" class="ouvrir" aria-hidden="true">Agir sur un utilisateur</a>
				<a href="#volet1" class="ouvrir" aria-hidden="true">Agirs sur tous les utlisateurs</a>

d'ouvrir les deux volets indépendamment l'un de l'autre mais pour l'instant aucun succès, auriez-vous des pistes?


Merci d'avance

[Sebastien14]

Bonjour,

Dans ton code html tu mets des ancres, les ancres sont un lien interne dans la page

Code :

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

1
2
3
 
<a href="#volet" class="ouvrir" aria-hidden="true">Agir sur un utilisateur</a>
<a href="#volet1" class="ouvrir" aria-hidden="true">Agirs sur tous les utlisateurs</a>

Tu veux faire quoi au juste ? que lorsque l'on clique sur Agir sur un utilsateur, cela déroule le contenu ?

[cycycysisisi]

Mon but est lorsque tu clique sur le premier: agir sur un utilisateur, un premier volet s'ouvre et quand tu cliques sur le deuxième: agir sur tout les utilisateurs, un autre volet s'ouvre.

Pour l'instant avec mon code je ne réussis à n'avoir qu'un seul volet sur la page,

Les ancres étaient un essai pour pouvoir ouvrir chacun des volets de façon indépendante.

[Sebastien14]

Il faut que tu utilises javascript pour afficher le volet correspondant au clic de l'utilisateur.

Pour l'exemple :

Code :

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

1
2
3
4
5
6
7
8
9
<style>
#zone1,#zone2{
display:none;
}
</style>
<div id="z1">Afficher zone 1</div>
<div id="e2">Afficher zone 2 </div>
<p id="zone1">Ma super zone 1</p>
<p id="zone2">Ma super zone 2</p>

Tes deux zones sont cachées, en javascript tu pourrais avoir une fonction de ce style :

Code javascript :

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

1
2
3
function afficher(idZone){
document.getElementById(idZone).style.display='block';
}

Mon exemple est un peu pourri mais voila le principe. C'est un projet pour tes études ?

[cycycysisisi]

Merci beaucoup pour ra réponse, mais une solution sans javascript est-elle possible ?

[Sebastien14]

tu peux aussi le faire qu'avec du css mais dans tous les cas il te faut un minimum de connaissances en développement web.