CODEWITHSUNDEEP
javascriptjqueryhtml
bigant841
bigant841

Reputation: 48

How to slideDown a fixed div once you press another button

What I am trying to do

Close a div with a secondary button and mimicking the slideDown script from the first button.

The problem

Once the footer button is pressed it displays my hidden div (#footerPanel) by pushing the header up. Once you click footer again it closes the panel and slides the header back into place.

The menu button will work as follow, once you hover over the button the site navigation will display (not included in JSFiddle). By having this I would like to have the ability to close the #footerPanel and have the header slide down, mimicking the close ability from the footer button.

What is happening now is, when I click menu the #footerPanel slides down but leaving the header stuck at the position where the div pushed it. Also when you move the mouse the div slides back up.

How can I go about fixing this issue? I tried a few solution but they all seem to have the same outcome.

The js

$('#more').toggle(function(){
    //show its submenu
$('#footerPanel').slideDown(500);
$(this).parent().parent().animate({'bottom': "+=400"}, 500);
    }, 
function () {
    //hide its submenu
$('#footerPanel').slideUp(500);     
$(this).parent().parent().animate({'bottom': "-=400"}, 500);            
    });
$(document).ready(function(){
$('#menu').hover(function(){
$("#footerPanel").slideToggle();
    });
});

JSFiddle

Upvotes: 1

Views: 570

Answers (1)

Neil Kistner
Neil Kistner

Reputation: 12373

Updated Fiddle: http://jsfiddle.net/9s33F/5/

I think I have what you are looking for. I added the following as a callback for when the animate function completes when opening the menu.

function () {
    $(this).addClass('open');
}

Then in the click handler for menu add the following if statement:

if ($(this).closest('header').is('.open')) {
    $('header').animate({'bottom': "-=400"});
}

Also, you're code will look cleaner and be less if you used .closest() rather than .parent().parent() and so on.

jQuery.closest: http://api.jquery.com/closest/

Upvotes: 1

Related Questions