jQuery custom toggle function?

Question

I'm trying to make a custom jQuery toggle function. Right now, I have 2 separate functions, lightsOn and lightsOff. How can I combine these functions to make them toggle (so I can just link to one function)?

function lightsOn(){
 $('#dim').fadeOut(500,function() {
   $("#dim").remove();
 });
};

function lightsOff(){
 $('body').append('<div id="dim"></div>');
 $('#dim').fadeIn(250);
};

Matt Ball · Accepted Answer · 2011-12-21 04:01:07Z

6

function toggleLights()
{
    var $dim = $('#dim');
    if ($dim.length)
    {
        $dim.fadeOut(500, function ()
        {
            $dim.remove();
        });
    }
    else
    {
        $dim = $('<div/>', {id: 'dim'});
        $('body').append($dim);
        $dim.fadeIn(250);
    }
}

Demo: http://jsfiddle.net/mattball/hxL8s/

answered Dec 21, 2011 at 4:01

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

Comments

Adam Rackis · Accepted Answer · 2011-12-21 04:00:28Z

2

function toggleLights(){
    if ($("body").has("#dim")) {
        $('#dim').fadeOut(500, function() {
           $("#dim").remove();
        });
    } else {
        $('body').append('<div id="dim"></div>');
        $('#dim').fadeIn(250);
   }
}

answered Dec 21, 2011 at 4:00

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

3 Comments

Matt Ball Over a year ago

Meh, you really don't need to keep re-querying the DOM for #dim.

hao_maike Over a year ago

Hmm.. thanks for the help, however it doesn't work for me. (The one from MДΓΓ БДLL does, however.)

Adam Rackis Over a year ago

@MДΓΓБДLL - true - I doubt it would ever matter - especially since you're querying by id. Besides, to optimize it I'd basically be copying your answer :)

Collectives™ on Stack Overflow

jQuery custom toggle function?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related