jQuery e voltando às configurações padrão - jquery

Eu tenho seguinte pedaço de código:

$(document).ready(function(){
$("#cont").hide();
$("#slide").show();

$("#slide").click(function(){
$("#cont").slideToggle();
$("#slide").css("background-image", "url("img/slideup.png")");
});
});

O código simplesmente chama o div para ser deslizadodescer do nada depois de clicar em outra div e voltar. E, no início, como no CSS, defini o ícone como uma seta apontando para baixo e, depois de um clique, ele muda para estar apontando para cima, permanecerá assim. Simplesmente não faço ideia de como fazê-lo "toogle "dependendo do status da div. Eu tentei muitas coisas e o script simplesmente caiu, alguém poderia me dar alguma pista ou o código que fará com que a imagem bg alterne? Algo como uma declaração div adequada, como o meu não funcionou ...

Muito obrigado!

Respostas:

Não tem 100% de certeza do que você quer dizer, mas você pode tentar algo como isto:

$("#slide").click(function(){
if ($("#cont").is(":hidden")) {
$("#cont").slideDown(400,function () {
$("#slide").css("background-image", "url("img/slideup.png")");
});
}
else {
$("#cont").slideUp(400,function () {
$("#slide").css("background-image", "url("img/slidedown.png")");
});
}
});

Experimente este exemplo aqui para você começado Eu definiria a exibição inicial em css e não em javascript.

$(document).ready(function(){

var slid = false,
toggleState = function(state){

// Figure out which direction to go.
var direction = state ? "slideUp" : "slideDown",
url = state ? "img/slideup.png" : "img/slidedown.png";

// Do the slide.
$("#cont")[direction]();
$("#slide").css("background-image", "url(" + url + ")" );

// Change the state
slid = !state;

};

$("#slide").click(function(){

toggleState(slid);

});

});