JQuery code to simplify

Question

I have this code, but it repeats a little, is there any way to make it shorter?

jQuery(document).ready(function() { var allTabs = jQuery('#front, #blog, #portfolio, #pages, #colors, #fonts'); allTabs.hide(); jQuery('#front-show').click(function() { event.preventDefault(); allTabs.hide(); jQuery('#front').show(); }); jQuery('#blog-show').click(function() { event.preventDefault(); allTabs.hide(); jQuery('#blog').show(); }); jQuery('#portfolio-show').click(function() { event.preventDefault(); allTabs.hide(); jQuery('#portfolio').show(); }); jQuery('#pages-show').click(function() { event.preventDefault(); allTabs.hide(); jQuery('#pages').show(); }); jQuery('#colors-show').click(function() { event.preventDefault(); allTabs.hide(); jQuery('#colors').show(); }); jQuery('#fonts-show').click(function() { event.preventDefault(); allTabs.hide(); jQuery('#fonts').show(); }); }); 

Answer 1

 allTabs.click(function() { event.preventDefault(); allTabs.hide(); var id = jQuery(this).attr('id'); var el = jQuery('#'+id.substring(0,id.indexOf('-'))); el.show(); }); 

Answer 2

You can use jQuery multiple selector :

 $("#fonts-show,#pages-show,#portfolio-show,#blog-show,etc...").click(function() { event.preventDefault(); allTabs.hide(); $("#"+$(this).attr("id").split("-")[0]).show(); }); 

EDIT: did not notice a different identifier between selectors. Edited the show statement to fix this.

Answer 3

Give them a generic class that you can use to select them, and then use the first part of the identifier to create a selector for .show() .

 jQuery('.someClass').click(function( event ) { event.preventDefault(); allTabs.hide(); jQuery('#' + this.id.split('-')[0] ).show(); // 'front-show' becomes '#front' }); 

---

Update:

Assuming the display is one of allTabs , I would do it instead.

 jQuery('.someClass').click(function( event ) { event.preventDefault(); allTabs.hide().filter('#' + this.id.split('-')[0] ).show(); }); 

Avoid reselecting the DOM.

Also, instead:

 '#' + this.id.split('-')[0] 

... you could do this:

 '#' + this.id.replace('-show','') 

Answer 4

Since all identifiers match the same pattern, and you want to bind to the click event for each element in allTabs (plus -show at the end), you can iterate over the allTabs variable and bind this path:

 jQuery(document).ready(function() { var allTabs = jQuery('#front, #blog, #portfolio, #pages, #colors, #fonts'); allTabs.hide(); allTabs.each(function() { var id = jQuery(this).attr('id'); var $target = jQuery(this); jQuery("#" + id + "-show").click(function(event) { event.preventDefault(); allTabs.hide(); $target.show(); }); }); }); 

Answer 5

 jQuery(document).ready(function() { var allTabs = jQuery('#front, #blog, #portfolio, #pages, #colors, #fonts'); allTabs.hide(); var ids = ['#front', '#blog', '#portfolio', '#pages', '#colors', '#fonts']; for(var x in ids) { jQuery(ids[x] + '-show').click(function() { event.preventDefault(); allTabs.hide(); jQuery(ids[x]).show(); }); } 

});

Answer 6

 $('#fonts-show,#pages-show,#portfolio-show,#blog-show,etc...').click(function() { event.preventDefault(); allTabs.hide(); var showId = $(this).attr('id'); var targetId = id.substring(0,id.indexOf('-')); $('#'+targetId).show(); });