Question

I have following piece of code:

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

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

The code simply calls of the div to be slided down from nowhere after clicking another div and getting back. And on start, as in CSS I’ve set the icon to be arrow pointing down, and then after a click it changes to be pointing up, it will just stay like this. I have simply no idea, how to make it “toogle” depending on the div status. I’ve tried a lot of things and the script simply falled down, could any one give me some clue or the code that will make the bg image toggle? Something like proper div statement, as my didn’t work…

Thanks alot!

Answer 1

Not 100% sure what you mean, but you could try something like this:

$('#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')");
        });
    }
});