How can I invisiblize groups of controls via jQuery?

Question

In my Sharepoint project/Web Part/Web Page, I dynamically create page elements/controls using C# in the *.ascx.cs file.

In the *.ascx file, I use jQuery for responding t

Answer 1

You can hide an element like so:

$('...').hide();

Or you can slide it up with:

$('...').slideUp();

to get a nice sliding up animation.

On a side note, you can do this to multiple elements at once, in your case:

$('[id$=txtbxthis], [id$=txtbxthat], [id$=txtbxtheother]').slideUp();

Answer 2

there are a number of ways to do this. but in your jquery implementation I would decorate the elements with data tags that will tell the code which elements to hide and show.

<input data-group="1" type="text" />
<input data-group="2" type="text" />

var $group1 = $('*[data-group="1"]');
var $group2 = $('*[data-group="2"]');
if (ckd) {
  $group1.hide(); 
  $group2.show(); 
}
else{
 $group2.hide(); 
 $group1.show(); 
}

You could do the same thing with css classes as well but I prefer using the data attribute

Answer 3

If you can group your controls using classes, you could select the class which needs to be hidden in that particular scenario and just use the hide() function:

if (ckd) {
    var cls = getClassForCurrentScenario();
    $("." + cls).hide(); //slideUp() would be an animated alternative
}

If the controls can be grouped inside a div, for example, then you'd just need to hide that element:

if (ckd) {
    var id = getElementIdForCurrentScenario();
    $("#" + id).hide(); //slideUp() would be an animated alternative
}

It really depends on how you manage to group your controls into "target groups", so that you can efficiently access them later.