jquery... link not working first time...

[SooTyLaD]

hi guys,

i am using jquery to hide/show an element, but when i click it first time, it does nothing, then proceeds to work correctly (toggling) from the second click onwards... any idea why the link seems to need 'activating'?

here is the code:

$(document).ready(function(){
	   $("a.contactToggle").toggle(function(){
	     $("#aContact").animate({ height: 'hide', opacity: 'hide' }, 'slow');
	   },function(){
	     $("#aContact").animate({ height: 'show', opacity: 'show' }, 'slow');
	   });
	 });

also, and this might be of help in the diagnosis, there are 2 places where you can click this link... and whenever you use one for the first time, or if you have just used the other one, it will need a double click to kick it off (well, not strictly a double click, can be as slow as you want)

any ideas?

 

[SooTyLaD]

could anyone hazard a guess? this is a real thorn in my side at the moment

 

[Inquisitor]

Unless I'm misunderstanding you, this should do what you want:

$(document).ready(function()
{
	$("a.contactToggle").click(function()
	{
		$("#aContact").toggle("slow");
		return false;
	});
});

 

[Augmented]

What's the href of the a.contactToggle? Is it something like:

<a href="#" class="contactToggle">Some Text</a>

If so, then I imagine you're getting the default click behaviour occurring first time, which will be to scroll to the fragment identifier you specified e.g. thecurrentpage.htm#.

You could try preventing the default behaviour occurring:

$(document).ready(function(){
    $("a.contactToggle").toggle(function(e){
        e.preventDefault();
        $("#aContact").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    },function(e){
        e.preventDefault();
        $("#aContact").animate({ height: 'show', opacity: 'show' }, 'slow');
    });
});

e is the current event, which us the argument passed in those callback functions.

Not entirely confident it's the fix. If not, can we see a live example, with markup, please?

 

[Inquisitor]

Ah yeah, forgot that you need to make the click handler return false to avoid scrolling – amended my code

 

[SooTyLaD]

ahh ok, well i think its getting somewhere...

inquisitor, your example worked (as in it worked on the first click) but the effect is different, what yours does is grow from the top left in 2 dimensions, i only want the animation to come down from the top (and increase opacity at the same time).

Augmented, unfortunately this does not change anything... the html that triggers it is this:

<li><a id="bContact" class="contactToggle" <?php if ($page == "contact") echo 'class="current"' ?>>Contact Us</a></li>

so there is no "#" to be overwritten (sorry should have included the html in the original post)

so what is the big difference between mine and inquisitors code that makes his work on the first click ?

 

[SooTyLaD]

oh my god, i had a realisation as i was writing the last post...

the two animations are just the wrong way round, so it was doing a hide first even though it was already hidden duh!!!!

this isn't actually that good a code then... it there a more intelligent way for this to work? i.e. for it to know which state it is in so it knows to toggle to what? cuz the problem with this now is if i have a close function on the thing that gets shown, it will fitst try to show it and that will not work until the second click...

any ideas?

 

[Inquisitor]

Try this:

$(document).ready(function()
{
	var contact = $("#aContact");
	$("a.contactToggle").click(function()
	{
		if (contact.css("display") == "none")
		{
			contact.animate({ height: "show", opacity: "show" }, "slow");
		}
		else
		{
			contact.animate({ height: "hide", opacity: "hide" }, "slow");
		}
		return false;
	});
});