How can I dynamically create a DIV in C#, add child elements to it, and then hide the DIV (and everything on it)?

Question

I've found one way to skin this cat from this which led to this, but I'm wondering if it might be better to put all my "slide-uppable" elements on a div, and then slide up that div?

To be more specific, I'm creating controls in C# dynamically for a Sharepoint Web Page / Web Part. I conditionally need to hide or slide up "sections" of elements.

Theoretically (I think), I can create a DIV (Panel) like so (in C#, in my *.ascx.cs file):

Panel panelSec2 = new Panel(); // DIV
panelSec2.ID = "panelSection2";

... and then create the controls immediately thereafter like so:

boxRequesterName = new TextBox
{
    CssClass = "dplatypus-webform-field-input"
};

...then add these controls to the DIV/Panel:

panelSec2.Controls.Add(boxRequesterName);
. . .

In this way (presumably/theoretically), I can hide/slide up the panel like so in jQuery in the corresponding *.ascx file:

$(document).on("change", '[id$=ckbxPaymentForSelf]', function () {
    if (this.checked) {
        var $panelSection2 = $('[id$=panelSection2]');
        $(panelSection2).slideUp();
    }
});

...and not have to worry about designating the individual controls for hidation/slidation.

Am I right? Or is there something wrong in my theory?

Answer 1

There's nothing wrong with your logic that I can think of.

One thing that might make things a little simpler on the JS side though would be to set the ClientIDMode to Static. Then you can use the more straight-forward '#ControlID' syntax instead of the attribute ends with syntax you've got now. You could also combine the two lines in the if statement to $('[id$=panelSection2]').slideUp()