Question

I am currently developing a new site for the Agency I work for which can be found here:

http://www.astwood.co.uk/testsite/wordpress/

At the top-right there are two buttons that slide down extra content for the contact and about us sections. I have animated the appearance of the extra divs using the following jQuery:

Hides the content on the page on load:

$("#about").hide();
$("#contact").hide();

Shows and hides the content when a link with the specified class is clicked:

$(".aboutbtn").click(function () {
   $('#contact').slideUp(
   function() {

        $('#about').slideToggle('slow');

   });
});

$(".contactbtn").click(function () {
   $('#about').slideUp(
   function() {

        $('#contact').slideToggle('slow');

   });
});

This works perfectly in most browsers, it will hide the existing open div if there is one and then open the specified section. However, in chrome for mac, the first time a button is pressed after page load it will slide down the content requested and immediately slide it back up again.

Any help would be appreciated. Thanks in advance.

Answer 1

Okay, turns out it was a browser plugin that was interfering with how the jQuery should have been working. The browser extension in question was Double Click which can be found here:

https://chrome.google.com/webstore/detail/double-click/mdoabndnbhmbbiggngmjbnoijnhfophe