Is jquery code better written / optimized?

Question

I'm just wondering how all 3 do the same thing with different identifiers, can it be better written / optimized?

$('#top_menu,#commun_links,#q_links').hide(); $('#top_menu_toggle').click(function () { $(this).text($(this).text() == '+ Menu' ? '- Menu' : '+ Menu'); $('#top_menu').slideToggle('slow').css({'display' : 'block'}); return false; }); $('#commun').click(function () { $(this).text($(this).text() == '+ Community' ? '- Community' : '+ Community'); $('#commun_links').slideToggle('slow'); return false; }); $('#qnav').click(function () { $(this).text($(this).text() == '+ Quick Links' ? '- Quick Links' : '+ Quick Links'); $('#q_links').slideToggle('slow'); return false; }); 

As usual, all help is appreciated and thanks in advance.

Answer 1

Just create a function that will bind everything, parameterize it so that you can pass to where you want to listen to the click, which element you want to drag. Toggle and the label you want to set on the button.

 function bindClick(click_tgt, rel_el, label) { $(click_tgt).click(function () { $(this).text($(this).text() == '+ ' + label ? '- ' + label : '+ ' + label); $(rel_el).slideToggle('slow').css({'display' : 'block'}); return false; }); } $('#top_menu,#commun_links,#q_links').hide(); bindClick('#top_menu_toggle', '#top_menu', 'Menu'); bindClick('#commun', '#commun_links', 'Community'); bindClick('#qnav', '#q_links', 'Quick Links'); 

And name it what suits you best :)

Answer 2

Assuming markup is made up of links

 <a class='menu' href='#' data-label='Menu'>Menu</a> <ul class='items'> <li>Item 1</li> <li>Item 2</li> </ul> <a href='#' data-label='Community'>Community</a> <ul class='items'> <li>Item 1</li> <li>Item 2</li> </ul> <a href='#' data-label='Quick Links'>Quick Links</a> <ul class='items'> <li>Item 1</li> <li>Item 2</li> </ul> $('.items').hide(); $('.menu').click(function () { var $this = $(this); var label = $this.data('label'); $this.text($this.text() == '+ ' + label ? '- ' + label: '+ ' + label); $this.next('ul:first').slideToggle('slow'); return false; }); 

You can do it even better by using the UL> LI nested style.

Answer 3

I have optimized the complete package for you .... Perhaps this will interest you.

Tick ​​Jsfiddle Link

Given HTML

 <div divtotog="top_menu" class="tog" tex="Menu">+ Menu</div> <div divtotog="commun_links" class="tog" tex="Community">+ Community</div> <div divtotog="q_links" class="tog" tex="Quick Links">+ Quick Links</div> <br> <div id="top_menu" style="display:none;">top_menu</div> <br> <div id="commun_links" style="display:none;">commun_links</div> <br> <div id="q_links" style="display:none;">q_links</div> 

Jquery

 $('.tog').click(function () { var txt = $(this).attr("tex"); $(this).text($(this).text() == '+ '+txt ? '- '+txt : '+ '+txt); $("#"+$(this).attr("divtotog")).slideToggle('slow').css({'display' : 'block'}); return false; });