如何通过javascript显示/隐藏按钮包含在模板中

Question

I have two asp.net buttons inside a template (Expand and Collapse) I want to implement a simple client side javascript function to hide the expand button after press it and show the collapse button and vice versa.

<asp:Button ID="btnExpand" runat="server" CommandName="Expand" 
            CommandArgument='<%# Container.DataElement("Id")%>' Text="+" />

<asp:Button ID="btnCollapse" runat="server" CommandName="Collapse" 
            CommandArgument='<%# Container.DataElement("Id")%>' Text="-" />

I tried OnClientClick event but I didn't know how to get the sender button and the second button from javascipt because they're in a template and their IDs will be generated.

I tried also to change their visibility from the code behind in the server (by Visible property) but the problems is the event handler will be fired after the postback and the changes will not be applied in the client.

Any help !!

sorry if the question is silly, I'm new in the web development.

Thanks in advance.

Answer 1

Use ClientID like:

<!-- Supposing you have the following button control -->
<asp:button id="myButton" runat="server" />

<script type="text/javascript">

    var theID = '<%= myButton.ClientID %>';

    // Now do whatever you like with it.

</script>

Answer 2

In the function where you are implementing the hide and show template, put $("#buttonID").hide(); .

Answer 3

Be careful where you place that code. You need to make sure that the html client renderer has finished creating that item.