Comment remplacer une image par une icône dans un script Toggle
Bonsoir à tous,
J'ai un footer qui s'affiche et ce cache via Toggle. En voici les CSS :
Code:
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:
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:
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
As-tu au moins eu la curiosité de faire une recherche ?
Citation:
En jQuery, on peut modifier :
un contenu HTML avec .html()
du CSS avec .css()
Oui, mais c'est toujours un peu compliqué pour moi :roll:
