Forums

chazzwick

Im using jquery to make a nice looking horizontal accordion thingy.

http://charles-harvey.co.uk/radio/

However, im thinking my jquery could be written more efficiently. I cant really find anything online to help me. Can anyone help?

Heres the jquery:

	$(document).ready(function() {
		$(\"#contact\").hide();
		$(\"#info\").hide();	
		$(\"#details\").hide();		
		
		$(\"a#contact-button\").click(function(){	
			$(\"#about\").slideUp();
			$(\"#contact\").slideDown();
			$(\"#info\" ).slideUp();
			$(\"#details\").slideUp();			
		});
			
		$(\"a#about-button\").click(function(){
			$(\"#about\" ).slideDown();
			$(\"#contact\").slideUp();
			$(\"#info\" ).slideUp();
			$(\"#details\").slideUp();
		});	
		
		$(\"a#info-button\").click(function(){
			$(\"#info\" ).slideDown();
			$(\"#contact\").slideUp();
			$(\"#about\").slideUp();
			$(\"#details\").slideUp();
		});		
		
		$(\"a#details-button\").click(function(){
			$(\"#details\" ).slideDown();
			$(\"#contact\").slideUp();
			$(\"#about\").slideUp();
			$(\"#info\").slideUp();		
		});			
	});

cssgirl

I don't have an answer for you since my jQuery skills are lacking, but I really like the accordion method you have going on here :)

cybershot

I would say that if it's not broken. don't fix it. The according thingy works well in my browser. Nice work.

cybershot

I like you code. Would you mind if I used it?

pab

Charles that is a great effect very smooth, as for the coding, there might be a simpler way,

you can try creating a class of hide and added to your anchors and instead of calling all the #id you just call

$(".hide").hide();

I didn't test this but i think it might work, you might have to do some adjusting to it.

but yeah back to the props ...

good job!!!!

chazzwick

thanks for all the kind words, and thanks pab for the advice.
Of course anyone can use the code, i didnt really do anything special here, its all just the same 2 Jquery functions

At_the_Gates

Hi Charles,

You can simplify it like this... The only changes I've made to the markup is to add rel attributes into the anchor elements which match the ids of the target divs. Basically this method passes the target div to jQuery via the rel attribute, then identifies which divs it needs to hide using the :not selector combined with that target div:


	$(document).ready(function() {

	$(\"#text div:not(#about)\").hide(); //choose a first page to show

		$(\"#buttons a\").click(function(){
			var target = $(this).attr(\"rel\"); //match the rel attribute to the target
			$(\".current\").removeClass(\"current\"); //remove any existing 'current' class because it's about to change
			$(\"#\"+target).addClass(\"current\").slideDown(); //add current class to the target div and then show it
			$(\"#text div:not(.current)\").slideUp(); //hide all the divs that do not have 'current' class
		});
	});


	<ul>
		<li><a id=\"about-button\" rel=\"about\">About</a></li>
		<li><a id=\"contact-button\" rel=\"contact\">Contact</a></li>
		<li><a id=\"info-button\" rel=\"info\">Info</a></li>
		<li><a id=\"details-button\" rel=\"details\">Details</a></li>
	</ul>

Hope that helps,

James

chazzwick

thats great, thanks a lot :D

At_the_Gates

Quick edit in fact... just browsing through the jQuery docs and found an even better way to optimise it, using a 'not' traversing expression - .not("#"+target) - rather than a :not selector like in the first line. You could probably also achieve the same thing using the :visible and :hidden selectors... either way, 29 lines of code down to 8 is not bad:


	$(document).ready(function() {

	$(\"#text div:not(#about)\").hide();

		$(\"#buttons a\").click(function(){
			var target = $(this).attr(\"rel\");
			$(\"#\"+target).slideDown();
			$(\"#text div\").not(\"#\"+target).slideUp();
		});
	});

James

chriscoyier

Very nice optimization! I need to get better at this kind of thing myself -- start thinking like a coder!

andrewsquidge

Very nice effect. I'm really getting into this jQuery stuff and finding it all very exciting. Let us know when you've included the newly optimised code on your site - I'd love to take a look.

treehouse : what would you like to learn today?

Forums

writing jquery more efficiently