Hiding Div on when other div gets visible

Question

Hi,

I have a code below in my aspx page:

<div id="FormContainer">
                <div id="leftSection">
                    <h1>
                        Contact Us</h1>
                    <div id="intro">
                        <p>
                            Contact PLI</p>
                        <p>
                            &nbsp;</p>
                    </div>
                    <esp:contactus id="ContactUs" runat="server" />
                </div>
</div>

And some code which comes from my above usercontrol (esp:contactus) is given below

    <div id="divMain" runat="server">
        <div class="leftColumn">
        <span id="ContactUs_lblFirstName" class="details">First name:<span class="asterisk" title="This field is mandatory">*</span></span>
        <input name="ContactUs$txtFirstname" type="text" maxlength="50" id="ContactUs_txtFirstname" />
        <span id="ContactUs_rfvFirstName" style="color:Red;visibility:hidden;">Please type your forename here</span>
        <span id="ContactUs_lblFamilyName" class="details">Family name:<span class="asterisk" title="This field is mandatory">*</span></span>
        <input name="ContactUs$txtFamilyName" type="text" maxlength="50" id="ContactUs_txtFamilyName" />
        <span id="ContactUs_rfvFamilyName" style="color:Red;visibility:hidden;">Please type your family name here</span>

        <span id="ContactUs_lblAddress1" class="details">Address 1<span class="asterisk" title="This field is mandatory">*</span></span>
        <input name="ContactUs$txtAddress1" type="text" maxlength="50" id="ContactUs_txtAddress1" />
        <span id="ContactUs_rfvAddress1" style="color:Red;visibility:hidden;">Please enter the first line of your address</span>
        <span id="ContactUs_lblAddress2" class="details">Address 2</span>
        <input name="ContactUs$txtAddress2" type="text" maxlength="50" id="ContactUs_txtAddress2" />

<asp:button id="btnSubmit" cssclass="submitBTN" text="Submit"
                onclick="Submit_Click" runat="server" />
        </div>
    </div>

<div id="divThanksmsg" runat="server">
        Thank you for your enquiry.
    </div>

If you see there is submit button in my usercontrol, after validating all above fields its display the thankyou div (divThanksmsg).

when user clicks on submit button it is validating all the form after validating fields my thankyou div (divThanksmsg) gets visible. But if you see the above div in my aspx page with id (intro) it is visible everytime. I want this div should get hidden when my thankYou div is visible.

Please suggest!

Answer 1

If I understand you correctly, you want to hide the "intro" div, when you show the "divThanksmsg". For this to work, you need a "runat=server" on the "intro"-div, and then, by this line in your code: divThanksmsg.Visible = true; you need to add intro.Visible = false;.

Answer 2

I see that you marked both div (divTanksmsg and divMain) to be ran at server. You can initialize divThanksmsg to be hidden at first by modifying the markup to

<div id="divThanksmsg" visible="false" runat="server">

After finishing your validation, you can do something like:

divThanksmsg.Visible = true;
divMain.Visible = false;

Answer 3

Have you considered using javascript to hide the intro message? Just inject a bit after you perform the validation. Maybe store a flag so that you know when you should re-add or remove that js.

In all honesty, though, this sounds like a situation that shouldn't arise in a well thought out design.