I'm currently struggling with changing the visibility of a label when a button is clicked. The label should initially be hidden and then appear after the button is clicked.
My attempts using DevEx controls and the SetVisible() function have not been successful. When the label is first set to 'display: none' via CSS as I want, the function does not work.
I also tried using ASP labels and changing the display property on click, but once again nothing happened.
Styling
.dxd
{
display: none;
}
JavaScript
<script type="text/javascript">
function fncShow(s, e) {
//show devex label
lblTest.SetVisible(true);
//show ASP label
document.getElementById("lblASP").style.display = 'block';
}
</script>
Body
<dx:ASPxButton runat="server" ID="btnTest" Text="Show" Width="100px" AutoPostBack="false">
<ClientSideEvents Click="fncShow" />
</dx:ASPxButton>
<dx:ASPxLabel runat="server" ID="lblTest" Text="Test label" ClientInstanceName="lblTest" CssClass="dxd"></dx:ASPxLabel>
<asp:Label runat="server" ID="lblASP" Text="Test label 2" CssClass="dxd"></asp:Label>
I've tried several methods to make either control work without success. I now wonder if it's possible to have a label invisible initially, and how this can be achieved using both controls. As a newcomer to JS, I may be overlooking something, but all my attempts so far have failed. Any assistance would be greatly appreciated.