Discussion :

[laurent94]

Bonjour tout le monde,

Je sollicite votre aide car je n'arrive pas vraiment au résultat escompté.

La div que je souhaite afficher et masqué se trouve être mon footer. J'arrive à l'afficher et le masquer avec un clic, mais la div cachée, s'affiche sans effet (d'un coup) et vers le bas or je souhaiterai qu'elle s'affiche avec un petit effet (je crois que c'est un slide le terme exacte) et vers le haut.

Pour plus de compréhension voici deux images :

L'état par défaut :



Une fois cliqué :



voici mon 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
<script type="text/javascript">
 
     function cachetr(idTemp) {
 
          var idT =idTemp;
 
 
 
 
 
         if (document.getElementById(idT).style.display == 'none') {
 
             document.getElementById(idT).style.display = '';
 
         } 
 
 
 
 
 
         else { document.getElementById(idT).style.display = 'none' }
 
     }
 
</script>

et le code html :

Code :

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

1
2
<footer><h1><a onclick="cachetr('footerplus');" href="#">Un peu plus ?</a></h1>
       <div id="footerplus" style="display:none; border-top:solid 1px white; margin-left:10px; margin-right:145px;"> blablabla blabla blabla blabla blabla blalb alb alblalb alb azlb azl</div> </footer>

Donc comme ont peu le voir sur les images, la div s'affiche vers le haut et par dessus les éléments supérieures. Ce qui n'est pas le cas avec le code que j'utilise.

Pourriez-vous m'aider pour arriver au bon résultat ?

[Menontona]

Essaye peut-etre de modifier plutot l'attribut CSS z-index.

[Torgar]

Bonjour,

Comme la dit Menontona, il faut utiliser la propriété CSS "z-index" couplé à la propriété "position" car l'un ne va pas sans l'autre, puisque "z-index" ne fonctionne qu'avec des éléments positionnés.

Tu devras peut-être appliquer deux couples "z-index/position", un couple pour ton footer (z-index à 1) et un autre pour le reste de ta page (z-index à 0), comme ça ton footer apparaitra au dessus du reste de ta page.

Rajoute déjà un :

Code :

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

1
2
3
4
footer {
position: relative;
z-index: 1;
}

En revanche, pour le coté animation (slide), c'est autre chose comme javascript. Je te conseillerai de t'orienter vers la librairie Jquery qui gère ça très bien et les tutos/exemples ne manquent pas sur la toile.