Question

I’ve got some code that uses toggle to show and hide a div, but now I want to do stuff based on which state it’s in. I’m not sure how to do this. I think I need to separate the toggle out into show and hide separately.

I’ve got this code, and below it, some pseudo code to suggest what I’m trying to do.

$(function() {
    $('.collapse_btn').click(function() {
        $("#shot_btn").attr("src","/images/contract_icon.gif");//replaces src in existing image with animated version. To be done when hide() runs
        $('.imgbox').toggle(400);
        $('#shot_h3').addClass("border_radius");
        $("#shot_btn").attr("src","/images/expand_icon.gif");//replaces contract_icon.gif. To be done when show() runs
    });
});


$(function() {
    $('.collapse_btn').click(function() {
        if(currently visible){
            $("#shot_btn").attr("src","/images/contract_icon.gif");//replaces src in existing image with animated version. To be done when hide() runs
            $('.imgbox').hide(400);
        }
        else{
            $('#shot_h3').removeClass("border_radius");
            $("#shot_btn").attr("src","/images/expand_icon.gif");//replaces contract_icon.gif. To be done when show() runs
            $('.imgbox').show(400);
    });
});

Thanks for any help offered.

Answer 1

if ($('.imgbox').is(':visible')) {
   //hide
}
else {
   //show
}

So with your code:

$('.collapse_btn').click(function() {
    if ($('.imgbox').is(':visible')) {
        $("#shot_btn").attr("src","/images/contract_icon.gif");
        $('.imgbox').hide(400);
    }
    else {
        $('#shot_h3').removeClass("border_radius");
        $("#shot_btn").attr("src","/images/expand_icon.gif");
        $('.imgbox').show(400);
    }
});