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 to events that happen on the page (selections, changes of checkbox states, etc.).

I have a need to conditionally invisiblize groups of controls/elements on the page. Specifically, if the user checks a certain checkbox, I can "remove" whole swaths of the page that, in that scenario, don't apply to her.

How can I do this? I've got this starting point:

/* If the select "Yes" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form */
$(document).on("change", '[id$=ckbxPaymentForSelf]', function () {
    var ckd = this.checked;
    if (ckd) {
        // what now?
    }
});

I could do it the hair-pulling-out way (which would be very painful for me, because I have almost as much hair as Absalom did), and set each individual element, like so:

if (ckd) {
    var $this = $('[id$=txtbxthis]');
    var $that = $('[id$=txtbxthat]');
    var $theother = $('[id$=txtbxtheother]');
    . . . // store a reference to all the other to-be-affected elements in vars
    $this.visible = false; // <= this is pseudoscript; I don't know what the jQuery to invisiblize an element is
    $that.visible = false; // " "
    $theother.visible = false; // " " 
    . . . // invisiblize all the other to-be-affected elements 
}

Surely there's a more elegant/better way!

Is it a matter of assigning all the conditionally invisible elements a particular class, and then invisiblizing every element that is assigned that class, or what?

Also, I want the area formerly used by this now-invisible swath to "go away" or "roll up" not sit there with a blank stare, yawning chasm, or Gobi Desert-like featureless expanse.

Come to re-examine my code, I guess I could simplify what I have to "if (this.checked)" — B. Clay Shannon-B. Crow Raven, Jun 17 '15 at 18:27

score 2 · Accepted Answer · edited Jun 17 '15 at 18:35

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

edited Jun 17 '15 at 18:35

B. Clay Shannon-B. Crow Raven

8,547
144
472
862

answered Jun 17 '15 at 18:23

QBM5

2,778
2
17
24

All answers are correct, but this one is the most elegant so far. +1 – Adib Aroui Jun 17 '15 at 18:33
I'm a _big fan_ of `data` attributes, but consider the following scenario: one control belongs to two different groups. Using (multiple) classes, that element could easily be picked, while using `data` attributes requires additional logic. – Andrei V Jun 17 '15 at 18:43
Very true. the only reason i prefer using data-, is classes are technically part of the elements css, you can easily create as many non css classes as you desire and use them for what ever reason you wish, but that is not really what classes are meant for (but I do it sometime too). With good enough logic this can be done in many ways equally as well – QBM5 Jun 17 '15 at 18:45
@QBM5, I totally agree. That's what `data` attributes are designed for: additional data inside the HTML. – Andrei V Jun 17 '15 at 18:48
I like this, but can't get it to work yet. I asked a follow-up question here: http://stackoverflow.com/questions/30899973/how-can-assign-a-data-group-value-to-an-html-element-created-in-c – B. Clay Shannon-B. Crow Raven Jun 17 '15 at 18:51

score 1 · Answer 2 · answered Jun 17 '15 at 18:20

1

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.

answered Jun 17 '15 at 18:20

Andrei V

7,306
6
44
64

Also consider that `hide()` is equivalent to `.css("display", "none")`, so if your design need that the space occupied by the element will still be available in the page, use `.css("display", "hidden")` – Adib Aroui Jun 17 '15 at 18:25
@whitelettersandblankspaces, good point, although that's rarely the scenario – Andrei V Jun 17 '15 at 18:26

score 0 · Answer 3 · answered Jun 17 '15 at 18:17

0

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();

answered Jun 17 '15 at 18:17

Wojciech Maj

982
6
21

I upvoted this to bring it back to 0, but would like to know why somebody dissed it. – B. Clay Shannon-B. Crow Raven Jun 17 '15 at 18:25
My guess would be because it was a lazy answer that gave very basic knowledge and assumed the complex implementation was not part of the original question. If someone wanted to know how to show and hide elements using jquery there are millions of ways to find that answer. With that in mind the someone may have made the assumption that the OP wanted implementation details as well and not this two line "no help" answer :) – QBM5 Jun 17 '15 at 18:48

How can I invisiblize groups of controls via jQuery?

3 Answers3

Linked