Personnellement, j'utiliserais simplement le code JavaScript pour basculer entre 2 classes.
Demandez au CSS de décrire tout ce dont vous avez besoin sur votre div MOINS la règle d'arrière-plan, puis ajoutez deux classes (par exemple: développées et réduites) en tant que règles avec chacune l'image d'arrière-plan correcte (ou la position d'arrière-plan si vous utilisez un sprite).
CSS avec différentes images
.div {
/* button size etc properties */
}
.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}
Ou CSS avec image-sprite
.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}
.expanded {background-position: left bottom;}
Ensuite...
Code JavaScript avec images
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).addClass('collapsed').removeClass('expanded');
}
else
{
$(this).addClass('expanded').removeClass('collapsed');
}
});
}
JavaScript avec sprite
Remarque: l'élégant toggleClass ne fonctionne pas dans Internet Explorer 6, mais la méthode ci addClass
- dessous / removeClass
fonctionnera bien dans cette situation également
La solution la plus élégante (malheureusement pas compatible avec Internet Explorer 6)
$(function){
$('#button').click(function(){
$(this).toggleClass('expanded');
});
}
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).removeClass('expanded');
}
else
{
$(this).addClass('expanded');
}
});
}
Pour autant que je sache, cette méthode fonctionnera sur tous les navigateurs, et je me sentirais beaucoup plus à l'aise avec le CSS et les classes qu'avec les changements d'URL dans le script.