Bonjour.

Je souhaite créer un volet d'options masquable.
Voici mon code :
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
<form id="frmRecherche" action="recherche.php" method="post">
	<div class="bloc_form">
		<label for="Mot">Mot :</label>
		<input type="text" id="Mot" name="Mot" title="Mot à rechercher" size="10" maxlength="20" pattern=".{3,}" value="">
		<a href="#blc_sensibilite" onclick="commuter_sensibilite();return false" id="commut_sensibilite"><img src="Images/engrenage.png" title="Options" alt="options"></a>
		<div id="blc_sensibilite">
			<label>Sensibilit&eacute; :</label><ul>
				<li>
					<input type="checkbox" id="SensibCasse" name="SensibCasse">
					<label for="SensibCasse" title="Sensibilité à la casse">casse</label>
				</li>
				<li>
					<input type="checkbox" id="SensibCarSpec" name="SensibCarSpec">
					<label for="SensibCarSpec" title="Sensibilité aux accents et caractères spéciaux">accents</label>
				</li>
			</ul>
		</div>
	</div>
	<div class="bloc_form">
		<label for="Lan" title="Langue">Langue :</label>
		<select id="Lan" name="Lan">
			<option value="">&nbsp;</option>
			<option value="GB">anglais</option>
			<option value="FR">fran&ccedil;ais</option>
		</select>
	</div>
	<button type="submit" id="btnRrechercher" name="btnRechercher">Rechercher</button>
</form>

Le volet d'options en question est le DIV blc_sensibilite. Pour faire du responsive design j'aimerais qu'il s'affiche à droite du champ Mot si l'écran est assez large et en dessous dans le cas contraire. Mais pour qu'il ne prenne pas trop de place dans ce second cas, je souhaiterais qu'il soit (dé)masquable à volonté avec un effet de transition (plus joli qu'une simple apparition/disparition avec display="none"). Pour masquer/démasquer ce volet, l'utilisateur cliquerait simplement sur le lien commut_sensibilite.

Pour l'instant mon code CSS ressemble à ça :
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
#recherche form {text-align:center}
#recherche .bloc_form {
	padding:.3rem;
	text-align:left;
	width:100%}
#recherche input {line-height:1.3rem}
#recherche #blc_sensibilite {
	display:block;
	margin-left:1rem}
#recherche #blc_sensibilite ul {
	list-style:none;
	margin:0}
#recherche #blc_sensibilite ul li {
	margin-left:.3rem}
#recherche #commut_sensibilite img {width:1.5rem}
/*#recherche #commut_sensibilite {display:none}*/
#recherche #blc_sensibilite {
	-webkit-transition: height .5s linear;
	-moz-transition: height .5s linear;
	-ms-transition: height .5s linear;
	-o-transition: height .5s linear;
	transition: height .5s linear;
	overflow:hidden}
@media screen and (max-width:600px) {
	#recherche #blc_sensibilite {
		height:4rem;
		margin-top:.5rem;
	}
}
@media screen and (min-width:600px) {
	#recherche #blc_sensibilite {display:inline-block}
	#recherche #blc_sensibilite {margin-left:2rem;position:relative;top:.3rem}
	#recherche #blc_sensibilite ul {display:inline}
	#recherche #blc_sensibilite ul li {display:inline}
}
#btnRrechercher {margin-top:1rem}
Mais ça ne fonctionne pas comme je le souhaiterais.
Auriez-vous une idée ?