Javascript/JQuery Nested if statements not working correctly

JSFiddle demonstrating problem (pretty hard to see with the corner box) http://ift.tt/1AbIAlL

I have 4 elements that are linked to each button. When the button corresponding with the section is pressed, it should check that none of the other 3 elements are visible. If another section is visible, it should slide it up before sliding down the desired section.

I thought the best way to do this was nested if statements (if b is visible then if c is visible and so on). At the moment, it works for the first 2 elements, this being because the first if statement corresponds to each of them. However for the others, it's as if it doesn't even get past the first statement and just slides down the section anyway, resulting in multiple sections being open.

Am i using nested if statements incorrectly or is it something that isnt compatible? I don't know if it would be better to hide the sections using jquery instead of css, but i assumed it would work regardless. If i've missed anything out, feel free to ask.

Thanks

---

(Javascript Code)

$(document).ready(function(){
$("#web-design").click(function(){
    if ($("#graphic-design-slide").css("visibility") == "hidden") {
        if ($("#branding-slide").css("visibility") == "hidden") {
            if ($("#film-production-slide").css("visibility") == "hidden") {
                $("#web-design-slide").slideDown();
            } else {
                $("#film-production-slide").slideUp();
                $("#web-design-slide").slideDown();
            }
        } else {
            $("#branding-slide").slideUp();
            $("#web-design-slide").slideDown();
        }
    } else {
        $("#graphic-design-slide").slideUp();
        $("#web-design-slide").slideDown();
    }
});

$("#graphic-design").click(function(){
   if ($("#web-design-slide").css("visibility") == "hidden") {
        if ($("#branding-slide").css("visibility") == "hidden") {
            if ($("#film-production-slide").css("visibility") == "hidden") {
                $("#graphic-design-slide").slideDown();
            } else {
                $("#film-production-slide").slideUp();
                $("#graphic-design-slide").slideDown();
            }
        } else {
            $("#branding-slide").slideUp();
            $("#graphic-design-slide").slideDown();
        }
    } else {
        $("#web-design-slide").slideUp();
        $("#graphic-design-slide").slideDown();
    }

});

$("#branding").click(function(){
    if ($("#web-design-slide").css("visibility") == "hidden") {
        if ($("#graphic-design-slide").css("visibility") == "hidden") {
            if ($("#film-production-slide").css("visibility") == "hidden") {
                $("#branding-slide").slideDown();
            } else {
                $("#film-production-slide").slideUp();
                $("#branding-slide").slideDown();
            }
        } else {
            $("#graphic-design-slide").slideUp();
            $("#branding-slide").slideDown();
        }
    } else {
        $("#web-design-slide").slideUp();
        $("#branding-slide").slideDown();
    }
});

$("#film-production").click(function(){
    if ($("#web-design-slide").css("visibility") == "hidden") {
        if ($("#graphic-design-slide").css("visibility") == "hidden") {
            if ($("#branding-slide").css("visibility") == "hidden") {
                $("#film-production-slide").slideDown();
            } else {
                $("#branding-slide").slideUp();
                $("#film-production-slide").slideDown();
            }
        } else {
            $("#graphic-design-slide").slideUp();
            $("#film-production-slide").slideDown();
        }
    } else {
        $("#web-design-slide").slideUp();
        $("#film-production-slide").slideDown();
    }
});

$("#contactFormTitle").click(function(){
    if ($("#contactFormArea").css("visibility") == "hidden") {
        $("#contactFormArea").slideDown();
    } else {
        $("#contactFormArea").slideUp();
    }
}); 

});