show/hide/toggle: suggestion to reduce show/hide code

[Dylan Verheul]

I'm building a new version of an often used data entry form on our
site Waarneming.nl (int'l version Observado.org).
It struck me that I often have to write something like this:

if (cond) $(this).show() else $(this).hide();

Since jQuery is about reducing and chaining, wouldn't it be nice if I
could write it like this:

$(this).toggle(cond); // shows if cond evaluates to true, else hides

Of course a new function showhide could be made for this, but toggle
seems a likely candidate for overloading.

-Dylan

[Karl Swedberg-2]

On Nov 18, 2008, at 1:10 AM, Dylan Verheul wrote:

I'm building a new version of an often used data entry form on our
site Waarneming.nl (int'l version Observado.org).
It struck me that I often have to write something like this:

if (cond) $(this).show() else $(this).hide();

Since jQuery is about reducing and chaining, wouldn't it be nice if I
could write it like this:

$(this).toggle(cond); // shows if cond evaluates to true, else hides

Of course a new function showhide could be made for this, but toggle
seems a likely candidate for overloading.

Hey Dylan,

Of course, you could write it this way, too:

$(this)[cond ? 'show' : 'hide']();

But I grant you that it's still not as elegant as an overloaded method. Not sure if toggle(cond) is the best choice, though. It's already pretty overloaded as it is, and it can already take a string or numeric argument for speed (e.g. 'slow'), which means you'd have to make sure that cond === true, not just cond == true.

Maybe a simple plugin would be more appropriate here. Something like this ...

(function($) {

$.fn.toggleIf = function(cond) {

  return this.each(function() {

    $(this)[cond ? 'show' : 'hide']();

  });

};

})(jQuery);

 

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

[Dylan Verheul]

On Tue, Nov 18, 2008 at 14:56, Karl Swedberg <karl@...> wrote:

> It struck me that I often have to write something like this:
>
> if (cond) $(this).show() else $(this).hide();
>
> Since jQuery is about reducing and chaining, wouldn't it be nice if I
> could write it like this:
>
> $(this).toggle(cond); // shows if cond evaluates to true, else hides
>
> Of course a new function showhide could be made for this, but toggle
> seems a likely candidate for overloading.
>
> Not sure if toggle(cond) is the best choice, though. It's already pretty
> overloaded as it is, and it can already take a string or numeric argument
> for speed (e.g. 'slow'), which means you'd have to make sure that cond ===
> true, not just cond == true.

Hmm, I actually checked the docs for that because that would make
.toggle an unsuitable overloader. The docs said toggle doesn't take
arguments:
http://docs.jquery.com/Effects
Outdated?

> Maybe a simple plugin would be more appropriate here. Something like this

That would be no problem at all of course.

[MorningZ]

How about something like  (although i admit the function name could
use some thinking, heh)

(function($) {
    $.fn.showorhide = function(bool) {
           if (bool) {
               $(this).show();
           }
           else {
               $(this).hide();
           }
           return this;
    };
})(jQuery);




On Nov 18, 9:02 am, "Dylan Verheul" <dylan.verh...@...> wrote:

> On Tue, Nov 18, 2008 at 14:56, Karl Swedberg <k...@...> wrote:
> > It struck me that I often have to write something like this:
>
> > if (cond) $(this).show() else $(this).hide();
>
> > Since jQuery is about reducing and chaining, wouldn't it be nice if I
> > could write it like this:
>
> > $(this).toggle(cond); // shows if cond evaluates to true, else hides
>
> > Of course a new function showhide could be made for this, but toggle
> > seems a likely candidate for overloading.
>
> > Not sure if toggle(cond) is the best choice, though. It's already pretty
> > overloaded as it is, and it can already take a string or numeric argument
> > for speed (e.g. 'slow'), which means you'd have to make sure that cond ===
> > true, not just cond == true.
>
> Hmm, I actually checked the docs for that because that would make
> .toggle an unsuitable overloader. The docs said toggle doesn't take
> arguments:http://docs.jquery.com/Effects
> Outdated?
>
> > Maybe a simple plugin would be more appropriate here. Something like this
>
> That would be no problem at all of course.

[Karl Swedberg-2]

On Nov 18, 2008, at 9:02 AM, Dylan Verheul wrote:

On Tue, Nov 18, 2008 at 14:56, Karl Swedberg <karl@...> wrote:

Not sure if toggle(cond) is the best choice, though. It's already pretty

overloaded as it is, and it can already take a string or numeric argument

for speed (e.g. 'slow'), which means you'd have to make sure that cond ===

true, not just cond == true.

Hmm, I actually checked the docs for that because that would make
.toggle an unsuitable overloader. The docs said toggle doesn't take
arguments:
http://docs.jquery.com/Effects
Outdated?

Hmmm, indeed. :) Not so much outdated as incomplete. I just went ahead and added it to the docs:

http://docs.jquery.com/Effects/toggle#speedcallback

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

[Dylan Verheul]

On Tue, Nov 18, 2008 at 19:58, Karl Swedberg <karl@...> wrote:
> On Nov 18, 2008, at 9:02 AM, Dylan Verheul wrote:
> Hmm, I actually checked the docs for that because that would make
> .toggle an unsuitable overloader. The docs said toggle doesn't take
> arguments:
>
> Hmmm, indeed. :) Not so much outdated as incomplete. I just went ahead and
> added it to the docs:
> http://docs.jquery.com/Effects/toggle#speedcallback

Good :-) Anyway, that means no simple overloading method is available.
Of course it's no problem to code it or even to write a plugin, but I
thought overloading an existing function would make for an interesting
and probably often-used functionality, which was the point of starting
this thread.

[Hector Virgen]

I ran into this same problem today and wrote up this quick plugin that accepts a boolean or function:

$.fn.extend({

showIf: function(fn)

{

var result;

switch (typeof fn) {

case 'function':

result = fn.call(this);

break;

default:

result = fn;

}

if (result) {

$(this.show());

} else {

$(this.hide());

}

return $(this);

}

});

Usage example:

// Show all LI's based on value of condition

var condition = true;

$('ul.tabs li').showIf(condition);

// Show all LI's that contain exactly 3 anchors

$('ul.tabs li').showIf(function()

{

    return ($(this).find('a').length == 3);

});

I hope this helps :)

-Hector

On Tue, Nov 18, 2008 at 11:13 PM, Dylan Verheul <dylan.verheul@...> wrote:

On Tue, Nov 18, 2008 at 19:58, Karl Swedberg <karl@...> wrote:
> On Nov 18, 2008, at 9:02 AM, Dylan Verheul wrote:

> Hmm, I actually checked the docs for that because that would make
> .toggle an unsuitable overloader. The docs said toggle doesn't take
> arguments:
>

> Hmmm, indeed. :) Not so much outdated as incomplete. I just went ahead and
> added it to the docs:
> http://docs.jquery.com/Effects/toggle#speedcallback

Good :-) Anyway, that means no simple overloading method is available.
Of course it's no problem to code it or even to write a plugin, but I
thought overloading an existing function would make for an interesting
and probably often-used functionality, which was the point of starting
this thread.

[Hector Virgen]

Oops, fixed a typo:

$.fn.extend({

showIf: function(fn)

{

var result;

switch (typeof fn) {

case 'function':

result = fn.call(this);

break;

default:

result = fn;

}

if (result) {

$(this).show();

} else {

$(this).hide();

}

return $(this);

}

});

-Hector

On Wed, Nov 19, 2008 at 9:29 AM, Hector Virgen <djvirgen@...> wrote:

I ran into this same problem today and wrote up this quick plugin that accepts a boolean or function:

$.fn.extend({

showIf: function(fn)

{

var result;

switch (typeof fn) {

case 'function':

result = fn.call(this);

break;

default:

result = fn;

}

if (result) {

$(this.show());

} else {

$(this.hide());

}

return $(this);

}

});

Usage example:

// Show all LI's based on value of condition

var condition = true;

$('ul.tabs li').showIf(condition);

// Show all LI's that contain exactly 3 anchors

$('ul.tabs li').showIf(function()

{

    return ($(this).find('a').length == 3);

});

I hope this helps :)

-Hector

On Tue, Nov 18, 2008 at 11:13 PM, Dylan Verheul <dylan.verheul@...> wrote:

On Tue, Nov 18, 2008 at 19:58, Karl Swedberg <karl@...> wrote:
> On Nov 18, 2008, at 9:02 AM, Dylan Verheul wrote:

> Hmm, I actually checked the docs for that because that would make
> .toggle an unsuitable overloader. The docs said toggle doesn't take
> arguments:
>

> Hmmm, indeed. :) Not so much outdated as incomplete. I just went ahead and
> added it to the docs:
> http://docs.jquery.com/Effects/toggle#speedcallback

Good :-) Anyway, that means no simple overloading method is available.
Of course it's no problem to code it or even to write a plugin, but I
thought overloading an existing function would make for an interesting
and probably often-used functionality, which was the point of starting
this thread.