How to hide only and show with out using any show function in jQuery

Question

I am using an ajax call.Is the results are not null then I need to show a div otherwise I need to hide that div.For that I used following code

      if(results == null)
        $('#divId').hide();

Here if the results are null then the div going to be hide.It is working fine.But when I need to show the div in a different function again I need to use

       $('#divId').show();

So what I want is I need to hide only results are null.But I need to show the div in all remaining cases.Is there any elegant way to do that.

Thanks in advance..

I just don't get it. Obviously, the OP knows how to use `else`. And he mentioned some 'different function' which has little connection with another parts of the question. — raina77ow, Jun 01 '13 at 10:58
Not sure what you mean, if you mean that you don't want to repeat the code $("#divId").show() then you could use a mediator pattern. Have events like "dataAvalable" and "dataError" and have specific functions listen to those events when it happens. This could save you from repeating code, www.addyosmani.com/resources/essentialjsdesignpatterns/book You can stack events that are part of a process: http://stackoverflow.com/questions/14440809/good-pattern-to-use-for-multiple-xmlhttprequests-used-by-different-processes — HMR, Jun 01 '13 at 11:01

score 2 · Accepted Answer · answered Jun 01 '13 at 10:59

2

Elegant? How about this:

$('#divId').toggle(results != null);

(In case it's not obvious, passing a boolean value to the .toggle() method tells it whether to show or hide the element(s) in question.)

answered Jun 01 '13 at 10:59

nnnnnn

147,572
30
200
241

I suppose `$('#divId').toggle(results)` would be sufficient here. – KooiInc Jun 01 '13 at 11:02
1

+1 Indeed, it's the most elegant way if the only action that alternates on `results != null` is show/hide. ) – raina77ow Jun 01 '13 at 11:02
1

@Koolinc - I don't think so, because `.toggle()` [can also accept an object](http://api.jquery.com/toggle/#toggle-options) to tell it to do other things. For this purpose it needs an actual boolean, not just a truthy or falsey value. – nnnnnn Jun 01 '13 at 11:04

GautamD31 · Answer 2 · 2013-06-01T10:59:24.090

0

Try like

$('#divId').css('display',(results == null)?'none':'block'); //You can use inline/block

But I suggest you to do check like this only

if(results == null){
   $('#divId').hide();
}else{
   $('#divId').show();
}

edited Jun 01 '13 at 10:59

answered Jun 01 '13 at 10:54

GautamD31

28,552
10
64
85

Did you test this? (Hint: you can't a sign a string equal to another string.) – nnnnnn Jun 01 '13 at 10:57
Yes, it should be `.css('display', ...)` But even that is wrong; what if we need to restore the visibility of non-block element? – raina77ow Jun 01 '13 at 10:59

Suresh Atta · Answer 3 · 2013-06-01T11:04:14.953

0

Do not go for Micro-Optimization .Use

   if(results == null){
       $('#divId').hide();
   }else{
       $('#divId').show();
   }

And much simple way is Data truthify

 if(results){
       $('#divId').show();     
       }else{
          $('#divId').hide();
       }

edited Jun 01 '13 at 11:04

answered Jun 01 '13 at 10:57

Suresh Atta

120,458
37
198
307

i am not asking for optimisations.I am curious to know – PSR Jun 01 '13 at 10:58

How to hide only and show with out using any show function in jQuery

3 Answers3