jQuery 'animate height'/'slideDown' combination making background color disappear when activated second time

Question

I have an animation where a 'rightContentSpacer' div increases in height when I click on any one of three links. 'rightContentSpacer' thereby overlaps the div that is displayed at that time, which once overlapped I hide to make way for the next div to be shown. 'rightContentSpacer', after a delay, subsequently decreases in height again to uncover the new, now shown, div (i.e. the div corresponding to the link pushed). The effect is akin to a bollard going up and down.

My issue: This works fine the first time. Nevertheless, if I push the 'same' link a second time (whether it be after activating 1, or both, of the other links in the mean time) the background color disappears. This happens for every div - background color is there the first time it is 'shown'; but if shown twice, the background color color disappears on the second show.

How can I prevent the background color disappearing?

JQuery:

$("#linkSweaters").click(function(){
    if ($('#rightContentService').css('display') == 'none' && $('#rightContentContact').css('display') == 'block'){
        $("#rightContentSpacer").animate({
            height: "100%",
            },1000);
        $("#rightContentContact").animate({
            height: "0",
            },1000);
        $("#rightContentContact").hide({
            });
        $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
            });
        $("#rightContentSpacer").delay(1000).animate({
            height: "10%",
            },1000);

    } else if ($('#rightContentService').css('display') == 'block' && $('#rightContentContact').css('display') == 'none'){
        $("#rightContentSpacer").animate({
            height: "100%",
            },1000);
        $("#rightContentService").animate({
            height: "0",
            },1000);
        $("#rightContentService").hide({
            });
        $('#rightContentSweaters').delay(2000).slideDown(1000, function() {
            });
        $("#rightContentSpacer").delay(1000).animate({
            height: "10%",
            },1000);

    } else if ($('#rightContentSweaters').css('display') == 'block'){
        $("#linkContact").off('click');
            }

    });

</script>

Relevant CSS:

        #rightContent {
            }

            #rightContentSpacer {
                height: 10%;
                margin:0 auto;
                background-color:;
                }

            #rightContentService {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:block;
                }

            #rightContentSweaters {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:none;
                }

            #rightContentContact {
                height: 90%;
                width:650px;
                margin:0 auto;
                background-color: red;
                position:absolute;
                display:none;
                }

For a full screen example, see the following: https://jsfiddle.net/ff3r8t9x/embedded/result/

For code with example: https://jsfiddle.net/ff3r8t9x/

I advise you press 'the Sweaters', then 'the Seamstress', and then once again 'the Sweaters' to see what I mean.

Answer 1

Given your fiddle examples, I would change the html of your "links" to be actual links - use the following style to make the new links look like your old ones:

.link {color:#ffffff; text-decoration:none;}

Then add a class to the content blocks and then you can massively simplify your jQuery to:

var contentDivs = $('#rightContent').children('div.content'),
    spacer = $('#rightContentSpacer');

$('.link').click(function (e) {
    e.preventDefault();
    var contentToShow = $($(this).attr('href'));
    if (!contentToShow.is(':visible') && !spacer.is(':animated')) {
        spacer.stop().animate({ height: '100%' }, 1000, function() {
            contentDivs.hide();
            contentToShow.show();
            spacer.animate({ height: '10%' }, 1000);
        });
    }
});

Updated fiddle

But in answer to your original question, the background is disappearing because the height of your content div is set to 0 - I think you are animating the height to 90% but the animation is run at a time when the div is either not visible or the place it sat in has a height of 0 (therefore 90% of 0 will be 0)