CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bigant841
bigant841

Reputation: 48

Close an active state on a button when pressing a secondary button

I am having issues in closing the active state on my footer button. When you click footer it will slide a hidden div pushing the fix div up and changing the word footer to close, with a background color for its active state. Once you click close the div will slide down and the wording will change back to footer and the active state is hidden.

The issue

when I click the menu button it does not change the active state on the footer button. The div will slide down but the wording will not change from close to footer and the background color will not change.

The JS

$('#more').click(function () {
    var open = $('header').is('.open');
    $('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
    $('header').animate({
        bottom: (open ? '-' : '+') + '=120'
    }, 400, function () {
        $('header').toggleClass('open');
    });                 
});
$('#menu').click(function () {
    if ($('header').is('.open')) {
        $('header').removeClass('open').animate({'bottom': "-=120"});
        $('#footerPanel').slideUp(400);
    }
});
$('.footerButton').click(function(){
    var $this = $(this);
    $this.toggleClass('footerButton');
    if($this.hasClass('footerButton')){
        $this.text('Footer');           
    } 
    else 
    {
        $this.text('Close');
    }
    $(this).toggleClass('activetoggle');
});

My Fiddle. How can I fix this issue?

Upvotes: 0

Views: 101

Answers (1)

Neil Kistner
Neil Kistner

Reputation: 12353

I added the following function as a callback for the animate function when clicking your menu button. It will check to see if the footer button is in the active state, and if so will update accordingly, otherwise it will leave it be.

function () {
    var $footer = $('.activetoggle');

    if ($footer.length)
        $footer
            .toggleClass('activetoggle footerButton')
            .text('Footer');
}

Updated Fiddle

Upvotes: 1

Related Questions