Jquery code better written/optimized?

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.

Tom Tu · Accepted Answer · 2011-11-24 13:13:57Z

5

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 :)

edited Nov 24, 2011 at 13:13

answered Nov 24, 2011 at 12:05

Tom Tu

9,58338 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dizzi Over a year ago

hide line has an extra ' that needs to be removed

JohnP · Accepted Answer · 2011-11-24 12:17:45Z

0

Assuming the 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 make this even better by using a nested UL>LI style

edited Nov 24, 2011 at 12:17

answered Nov 24, 2011 at 12:08

JohnP

50k13 gold badges112 silver badges142 bronze badges

Comments

Wasim Karani · Accepted Answer · 2011-11-24 12:51:41Z

0

I have optimized complete package for you....You might be interested.

Check this Jsfiddle Link

Considering 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;
});

edited Nov 24, 2011 at 12:51

answered Nov 24, 2011 at 12:10

Wasim Karani

8,87410 gold badges58 silver badges100 bronze badges

1 Comment

Dizzi Over a year ago

Wouldn't adding a var be better? ... var txt = $(this).attr("tex");

Collectives™ on Stack Overflow

Jquery code better written/optimized?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related