Accordion

[attila2452]

so this is my accordion script

$(document).ready(function($) {	   $('#accordion dd').hide();			  $('#accordion dt a').click(function(){			   $('#accordion dd').slideUp();			   $('#accordion dt a:active').css("color:#FFF;");			   $(this).parent().next().slideDown();			 			   return false;	   });});

what it does is when the link is clicked it will open up the text for it, and when another one is clicked, it will close the opened one, and open the new one. but when i click an opened one, it will close it, and then open it again. how do i stop the open text, to from opening again.

[attila2452]

I just want it to be able to close!

[MrFish]

Just keep track of which one is opened.

$(document).ready(function() {	$('#accordion dd').hide();		$('#accordion dt a').click(function()	{		if(!$(this).hasClass("opened"))		{			$('#accordion dd').slideUp();			$('#accordion dt a:active').css("color:#FFF;");			$(this).parent().next().slideDown();						$(this).siblings(a).removeClass("opened");						$(this).addClass("opened");		}	});});

[attila2452]

Just keep track of which one is opened.

$(document).ready(function() {	$('#accordion dd').hide();		$('#accordion dt a').click(function()	{		if(!$(this).hasClass("opened"))		{			$('#accordion dd').slideUp();			$('#accordion dt a:active').css("color:#FFF;");			$(this).parent().next().slideDown();						$(this).siblings(a).removeClass("opened");						$(this).addClass("opened");		}	});});

it didnt workit wont open fully now.check it out.http://attilahajzer.comeze.com/sites/Buisness/(its Quick Info) (on the left)

[MrFish]

I didn't give you a working script to simply copy and paste. You need to analyze what I'm doing and create/fix it. With a little debugging I was able to see this is a problem-

$(this).siblings(a).removeClass("opened");

Which probably should be this-

$(this).siblings('a').removeClass("opened");

However there may still be more problems. Go about it the way you normally would. (All modern browsers have a javascript console so it shouldn't be difficult to debug).

[attila2452]

I didn't give you a working script to simply copy and paste. You need to analyze what I'm doing and create/fix it. With a little debugging I was able to see this is a problem-

$(this).siblings(a).removeClass("opened");

Which probably should be this-

$(this).siblings('a').removeClass("opened");

However there may still be more problems. Go about it the way you normally would. (All modern browsers have a javascript console so it shouldn't be difficult to debug).

when do i use single quotes and double quotes? is there a specific time i should use them?

[Synook]

In JavaScript, it doesn't matter. Using a certain one can help reduce the amount of escaping necessary, though:

'<img src="a.gif" alt="A" title="The image A"';"<img src=\"a.gif\" alt=\"A\" title=\"The image A\"";

[abdelelbouhy]

so this is my accordion script

$(document).ready(function($) {	   $('#accordion dd').hide();			  $('#accordion dt a').click(function(){			   $('#accordion dd').slideUp();			   $('#accordion dt a:active').css("color:#FFF;");			   $(this).parent().next().slideDown();			 			   return false;	   });});

what it does is when the link is clicked it will open up the text for it, and when another one is clicked, it will close the opened one, and open the new one. but when i click an opened one, it will close it, and then open it again. how do i stop the open text, to from opening again.

try to reference it like that $(this).parents().children('dd').hide() then open the next one i can't see your dom to see the relation between them but i think that's how you do it

[attila2452]

try to reference it like that $(this).parents().children('dd').hide() then open the next one i can't see your dom to see the relation between them but i think that's how you do it

didn't work.

[attila2452]

i ended up just making different flips.

$(document).ready(function(){$(".flip1").click(function(){	$(".panel1").slideToggle("slow");  });$(".flip2").click(function(){	$(".panel2").slideToggle("slow");  });$(".flip3").click(function(){	$(".panel3").slideToggle("slow");  });$(".flip4").click(function(){	$(".panel4").slideToggle("slow");  });$(".flip5").click(function(){	$(".panel5").slideToggle("slow");  });});