Bonsoir à tous,
J'ai un footer qui s'affiche et ce cache via Toggle. En voici les CSS :
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
#toggler{
	text-align: center;
	position: fixed;
	bottom: 30px;
	width: 100%;
	height: 30px;
	z-index: 9999999;
	left: 0px;
	right: 0px;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
}#toggle{
	text-align: center;
	bottom: 0px;
	position: fixed;
	width: 100%;
	z-index: 999999;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0em;
}
#toggle p{text-align:center;padding:0}
 
.button {
	background-image: url(imgs/fleche_haut.jpg);
	background-repeat: no-repeat;
	text-align: center;
	position: relative;
	background-position: 50% 0%;
	margin-bottom: 0px;
}
 
.background {
	/* [disabled]background-color: #CC3300; */
	background-image: url(imgs/fleche_bas.jpg);
	background-repeat: no-repeat;
}
et le js :
Code javascript : 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
jQuery(document).ready(function()
{
   jQuery('#toggle').hide();
   // toggle()
   jQuery('a#toggler').click(function()
  {
      jQuery('#toggle').slideToggle(400);
      return false;
   });
});
/* ]]> */
</script>
<script>
$(".button").on('click', function(){ $(this).toggleClass('background'); })
</script>
<script>
$(document).ready(function(){
	$('.logo').hide();
});
$(window).load(function(){
	$('.header').fadeIn('slow');
	$(".header").delay(1800).animate({
		marginTop:'0px',
		opacity:1
	},1800,'swing');
});
</script>

Y'a y'il moyen de remplacer les images (fleche_haut et _bas.jpg) par du texte/icônes ?
Voici mon html actuel :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
<a href="#" id="toggler" class="button">Ouvrir</a>
<div id="toggle" style="display:none;">
Merci pour votre aide.
Bonne fin de week-end,
dh