Question

I currently have two divs “#Header_Info” and “article”

Article is a static div that displays information on the page and #Header_Info is a div that expands to show extra information but when #Header_Info expands it goes over Article so I have made Article fadeout before the other div expands over it, however the issue is that when you click the button again the Article appears before the #Header_Info has collapsed and I cane figure out where I’m going wrong.

This is my code:

$('.address a').click(function () {
    $("article").fadeToggle("fast", function () {
        $('#Header_Info').slideToggle('slow', function () {
            $(".address a").text($(this).is(':visible') ? "Hide Information" : "Address & Opening Hours");
        });
    });
}); 
});

Answer 1

You can try the fade with same speed and fading at the same time

$('.address a').click(function () {
    $("article").fadeToggle("fast");
    $('#Header_Info').slideToggle('fast', function () {
        $(".address a").text($(this).is(':visible') ? "Hide Information" : "Address & Opening Hours");
    });
}); 

if you can provide some related html markup, I can create a fiddle for testing as this code probably has a bug or 2

Something like this http://jsfiddle.net/e6wPa/ minimum css