Question

I’m just wondering as all 3 do the same thing just to different id’s 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 which will bind everything, parametrize it so you can pass where you want to listen for the click, what element you want to slideToggle and 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 whatever suits you best 🙂