Custom jquery dropdown - one at a time - buggy

At this site: ryanbent.com I am working on a custom dropdown using jQuery where I have only ONE dropdown box show at a time,

e.g. if you click contact, then click about, contact will slide back up, and about will slidedown.

To be more specific try this, clck: contact then about then portfolio then contact, see on on the last click it just hides and has a different behavior. Now try clicking the others again, see what is happening?

The first three clicks seem to work fine, but after that you will see what happens. It just fades away and the pattern is lost.

My jQuery is below, I broke it in to different sections, and they all look good.

Thoughts?

Thanks,

Ryan
$("#contact,#about,#portfolio").click(function(){  
                $('#top').css({'z-index':'50'})
                $("#fuzz").fadeIn();  
        return false;  
        });
        function HideMenu(){
                //$('.open').stop().animate({'top':'-480px'},500,"linear");
                $(this).removeClass("open");
                $("#fuzz").fadeOut();
        }
        function checkMenu(){$('.open').slideUp().removeClass("open")}
        $('#contact').toggle(function(){
                checkMenu();
                $('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
                //$('#contact-pull').slideDown();
        }, function() {
                HideMenu();
                $('#contact-pull').animate({'top':'-180px'})
        });     
        $('#about').toggle(function() {
                checkMenu();         
                $('#about-pull').show().animate({'top':'55px'}).addClass("open");                
                // $('#about-pull').slideDown();
        }, function() {
                HideMenu();
                $('#about-pull').animate({'top':'-465px'})
        });     
        $('#portfolio').toggle(function(){
                checkMenu();
                $('#portfolio-pull').animate({'top':'75px'}).addClass("open");
        }, function() {
                HideMenu();
                $('#portfolio-pull').animate({'top':'-150px'});
        });

Open in new window

LVL 1
catonthecouchproductionsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HaloWebProjectsCommented:
much better to use click instead of toggle... esp in this case...

have a attribute added to the menu links which will contain the state of visibility of its content section...

then upon click, you can see what value is set and thus determine what to do, to show or hide the section... and after you done it, set the attribute's value to the newly changed state...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
catonthecouchproductionsAuthor Commented:
this is what I have, check out the source code of the site. I can try click, see the method im doing?

Ryan
0
HaloWebProjectsCommented:
granted, you are correct... however what I meant was not to use toggle here at all... you can use the links's custom attributes in order to store content's display state... so then you dont need toggle anymore when you can determine the visibility state of the links content upon clicking on the link
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

catonthecouchproductionsAuthor Commented:
Ok, I get that part, that makes sense. But do you see what it does now? If you follow that pattern it works, then after the three I said it gets all messed up.

I will switch toggle to click. I have two functions that check the state.

Ryan
0
HaloWebProjectsCommented:
also  here

function HideMenu(){
                //$('.open').stop().animate({'top':'-480px'},500,"linear");
                $(this).removeClass("open");
                $("#fuzz").fadeOut();
        }

$(this).removeClass("open");  -  there is no reference for "this" reference... so the class "open" does not get removed when this function gets called
0
catonthecouchproductionsAuthor Commented:
Let me try this and go through and switch to click, thank you!
0
catonthecouchproductionsAuthor Commented:
Then change this to the class?

$(this).removeClass("open");
0
catonthecouchproductionsAuthor Commented:
What do you think of this?

Instead of toggle, use click which just gets fired once, so on click then animate down. This will remove the close function of the toggle, and instead I can have the function test for it?, so all toggles go to click like you suggested and minimize those functions.

Something like that?
0
catonthecouchproductionsAuthor Commented:
Check out the code, along those lines?

On click, run checkmenu (if open classs then close?)
then animate back down

Thanks,

Ryan
function checkMenu(){$('.open').slideUp().removeClass("open")}

	$('#contact').click(function(){
		checkMenu();
		$('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
		//$('#contact-pull').slideDown();
	});     
	$('#about').click(function() {
		checkMenu();         
		$('#about-pull').show().animate({'top':'55px'}).addClass("open");                
		// $('#about-pull').slideDown();
	});     
	$('#portfolio').click(function(){
		checkMenu();
		$('#portfolio-pull').animate({'top':'75px'}).addClass("open");
	});

Open in new window

0
catonthecouchproductionsAuthor Commented:
If you check http://ryanbent.com/ now, i think the code is throwing it in a loop with running that function over again.

Ryan
0
catonthecouchproductionsAuthor Commented:
What would be the best way to just check for DONt execute on last one clicked.
0
HaloWebProjectsCommented:
why cant you use something like this:


$(function(){

	$('a.resume').lightBox();
	$("#fuzz").css("height", $(document).height());
	
	$('#contact, #about, #portfolio').click(function(){
		
		if ($('#'+$(this).attr('id')+'-pull').hasClass('open')) {
			$('#'+$(this).attr('id')+'-pull').removeClass('open');
			$("#fuzz").fadeOut();
		} else {
			$('#top').css({'z-index':'50'});
			$("#fuzz").fadeIn(); 
			$('#'+$(this).attr('id')+'-pull').slideToggle().addClass("open");
		}
		
		return false;
	});     


});

Open in new window

0
HaloWebProjectsCommented:
even cleaner
$(function(){

	$('a.resume').lightBox();
	$("#fuzz").css("height", $(document).height());
	
	$('#contact, #about, #portfolio').click(function(){
		
		clicked_link_id = $(this).attr('id');
		
		if ($('#'+clicked_link_id+'-pull').hasClass('open')) {
			$('#'+clicked_link_id+'-pull').removeClass('open');
			$("#fuzz").fadeOut();
		} else {
			$('#top').css({'z-index':'50'});
			$("#fuzz").fadeIn(); 
			$('#'+clicked_link_id+'-pull').slideToggle().addClass("open");
		}
		
		return false;
	});     


});

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.