ASPX panel hide/show on button click, how?

You would have something like this:

<script type="text/javascript">
   function showSecondPanel()
   {
      var p1 = document.getElementById('<%= pnl1.ClientID %>');
      var p2 = document.getElementById('<%= pnl2.ClientID %>');
 
      p1.style.display = 'hidden';
      p2.style.display = '';
   }
</script>
<asp:Panel ID="pnl1" runat="server">
   <!-- Your contents -->
   <asp:Button ID="btnSubmitFirst" runat="server" OnClientClick="showSecondPanel" Text="Submit"></asp:Button>
</asp:Panel>
<asp:Panel ID="pnl2" runat="server" style="display: hidden;">
   <!-- Your contents -->
</asp:Panel>

Select allOpen in new window

Thank you for the response. I'm receiving an error:

CSS validation: 'hidden' is not a valid property for 'display' in the aspx edior (VS2005)

Sorry, I'm always mixing up the properties for display and visibility.  It's display: none;

I must have something out of whack. I'm getting this error now: "Object required" when I click the button.

Here's the script:
 <script>
            function ShowPanel()
            {
            var p2 = document.getElementById('<%= MorePanel.ClientID %>');
                p2.style.display = "";
            }
</script>
Here's the button:
<asp:Button ID="MoreBtn"  runat=server CssClass="button" Text="Show It" CausesValidation="False" UseSubmitBehavior="False" OnClientClick="ShowPanel()"/></td>

What am I missing / goofing up?

Ah, no, this was my mistake.  Like I said, always mixing up display and visibility.

Rather than using display, use visibility.  display: none; actually stops the control from being rendered.

<script type="text/javascript">
   function showSecondPanel()
   {
      var p1 = document.getElementById('<%= pnl1.ClientID %>');
      var p2 = document.getElementById('<%= pnl2.ClientID %>');
 
      p1.style.visibility = 'hidden';
      p2.style.visibility = '';
   }
</script>
<asp:Panel ID="pnl1" runat="server">
   <!-- Your contents -->
   <asp:Button ID="btnSubmitFirst" runat="server" OnClientClick="showSecondPanel" Text="Submit"></asp:Button>
</asp:Panel>
<asp:Panel ID="pnl2" runat="server" style="visibility: hidden;">
   <!-- Your contents -->
</asp:Panel>

Select allOpen in new window

The first panel hides, but the second does not display, yet I still get the "object required" error message.

I have:

 <script type="text/javascript">
            function ShowPanel()
            {
            var p1 = document.getElementById('Panel1');
                p1.style.visibility = 'hidden';
            var p2 = document.getElementById('Panel2');
                p2.style.visibility = 'visible';
            }
 </script>

<asp:Panel ID="MoreChildrenPanel" runat="server" Height="50px" Width="125px" style="visibility: hidden;">

thanks!

I realized in the page load of the code behind (.vb) I was rendering the panel not visible which is why I was receiving the error described above. Took that out and now I'm closer. The panel displays on button click. However, when the form loads, I've got a ton of whitespace where the panel would be.

Can this be loaded without the whitespace, then have the remaining data on the form slide up / down? Or will I be required do do this with my code behind and a postback?

thanks!

Ah ok, now if you switch back to display: none; rather than visibility: hidden; it should work as expected.  I didn't realize you had a visible = false in the code file.

I'm now getting the "object required" error.

I've re-updated the code behind (.vb) to include panel.visible = false on the page load.

I've updated the aspx java script to display = "hidden" to hide and "" to display.