efficiency of jquery toggler

Here's the link to my code: http://jsbin.com/edago3/edit

I would love to find out what improvements could be made to make it smaller and more efficient.

Any help is appreciated.


There are a number of improvements you can make if you're looking for more concise code, you can see a full updated sample here. I'll list the main areas you can save code on below (for equivalent functionality of course).

The main bits:

.html("  toggler  ")

Can be shortened to...

$('<span>', { html: "&nbsp; toggler &nbsp;", 'class': "gm-toggler"}).hide()


$li.hover(function() {
$('.gm-toggler', this).show();
}, function(){
$('.gm-toggler', this).hide();

Can be shortened to...

$('.gm-toggler', this).toggle();


// ... remove its active class ...
} else {
// ... otherwise give it an active class.

Can be shortened to....


It's probably better to ask which parts you have questions on, the relevant documentation for the methods I used can be found here: .toggle(), .toggleClass(), jQuery(html, props).

Looks well written to me, nice job! The only small thing I found that could be improved is line 17, change:

.html("&nbsp; toggler &nbsp;")



and then pad .gm-toggler on the left and right with CSS.

Using .html relies on .innerHTML and will be slower than a standard Javascript text insertion (but it would write out the &nbsp; as text, hence the padding, which is better for separating presentation anyway).

Also, in the line just before that, you can just say $('<span>') and jQuery will construct it exactly as you've written. Just more readable.

Category:javascript Time:2010-05-27 Views:0

Related post

  • Is there an efficient way of doing jQuery toggle? 2011-09-02

    I was creating a FAQ section for my site, and, was wondering if there's more efficient way of toggling answers when the question is clicked. So far, I have the below code. However, it opens all answers when any question is clicked. If I wanna do it o

  • Jquery toggle function problem with checkbox if else statement 2011-08-04

    I have a Jquery toggle function. I have made an if else statment to fix the bug when a checkbox i pressed directly its got checked and uncheched. Therefor I have maded a else if statement to check if the checkbox have been checked. But now the checkb

  • using jQuery toggle function on a table row makes table itself grow 2009-08-10

    I'm using the jQuery toggle effect hooked to the click() event of 1 table row to toggle the visibility of the next row (which also happens to be the final row in the table). If I click the firing row multiple times in succession, the table that conta

  • Jquery toggle function breaks on pages that include mootools or slimbox script 2009-08-28

    My friend is asked me to look over her site where there is an error on pages that use slimbox-- an unrelated Jquery toggle function breaks— here's the code: $(function() { $(".cat_nav dd").hide(); $(".cat_nav dt").click(function() { $(this).next().to

  • Why doesn't this simple jQuery toggle animation work properly? 2009-09-15

    Your help would be very very much appreciated. I spend 4 hours trying to figuring this out, but was not successful, albeit it is a very easy example: Given the following (full running and Copy and Paste ready) example, I have two Strange Problems (oc

  • jQuery toggle changes element's width? I don't want it to! :( 2009-09-18

    I currently have a table that has a width of 94%, and the following toggle set to it: $(document).ready(function(){ $("#moreinfo").hide(); $("#toggleinfo").click(function () { $("#moreinfo").toggle('normal'); }); }); It toggles fine, but as soon as y

  • JQuery: Toggle question 2009-10-28

    How do you fire a JQuery toggled event once, and only once, another JQuery toggled event has been completed? I have the following: I have <div id="displayDivWhenPageLoads">...</div> - this DIV is show (visible) when the web page loads. I

  • jquery: .toggle(switch) with effect? 2009-11-13

    i like the jquery.toggle(switch) function as i can do the following in one line; $('.mytable').toggle(checkboxes[0].checked); However i cant seem to integrate effects into this call (sliding / fading etc). Can anyone offer suggestions? --------------

  • jQuery Toggle Show/Hide w/Multiple DIV ID's 2010-01-17

    CODE: $(document).ready(function() { $('.toggle').hide(); $('.show').click(function(){ $('.toggle').toggle('slow'); $(this).attr('src','images/checkmark2.jpg'); },function(){ $('.toggle').toggle('slow'); $(this).attr('src', 'images/checkmark1.jpg');

  • can jquery toggle the original css(style.css) value and the new value(set in the .animate{})? 2010-02-07

    erm...can jquery toggle the original css(style.css) value and the new value(set in the .animation{})? $(function() { $('a.maximize').click(function() { $($(this).attr('href')).animate({ position: "absolute", top: 0, left: 0, height: '99.5%', width: '

  • Does something like jQuery.toggle(boolean) exist? 2010-03-05

    I write something similar to the following code a lot. It basically toggles an element based on some condition. In the following made-up example, the condition is "If the agree checkbox is checked and the name field isn't empty". $("button").click(fu

  • Jquery toggle function that doesn't return false? 2010-03-13

    Is it possible to stop the automatic preventDefault() from applying in a simple Jquery toggle function? $(".mydiv").toggle( function () { $(this).addClass("blue"); }, function () { $(this).removeClass("blue"); } ); The above prevents elements inside

  • jQuery toggle pushing other elements around- bullies! 2010-04-06

    Ok, so in the left_col of my page, i have a list UL LI that incorporates a jQuery toggle to open a small box, which is "LoginBox". <ul> <li class="members"><a href="/members/signon.asp?userType=member">Members</a></li>

  • jquery toggle and transprent PNG 2010-04-13

    i have a jquery toggle that animates and displays a DIV. i have a transparent PNG , drop shadow type background image, and when it first appears, i see a black background then it dissapears once the image loads... is there a way around that? is that

  • jquery toggle: clicking on link jumps back to top of the page 2010-05-18

    I created a jquery toggle, but when I click the link to open a div it will jump to the top of the page. how can I fix this? I know I could replace the link with something else but I need to make it clear to the users that it's a link and that they ca

  • jQuery .toggle() not working as expected with second function? 2010-06-14

    I'm trying to create a button to show / hide a div below it, all is working fine, I'm just struggling with the last bit! I need to distinguish wether it's a show or hide action so I can pass the variable elsewhere, here's what I have.. $(this).find('

  • Need to bypass jquery toggle function 2010-06-22

    I need to be able to bypass the first function of a toggle and I was wondering how the jquery toggle works? I understand that if I click on something, the first function is carried out and then when I click on it again, the second function is carried

  • jquery toggle and multiple links 2010-06-26

    i'm using jquery toggle to show/hide a div on different links. It shows/hides them fine, however if you click on one of the other links before closing the first link toggle, the first div is still shown. Is there any way of checking if there are any

  • Jquery - Toggle & page refresh open div 2010-07-04

    How do you open a JQuery toggle from a url? at the moment I am using return false to prevent an href action but I would really prefer to keep the href action to refresh the page. here is my code $('#adminMenu h3').click(function() { $(this).next('ul'

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.717 (s). 13 q(s)