これには、AJAX Toolkit コントロール(ToolkitScriptManager および CollapsiblePanelExtender) を使用できます。そのためには、次の手順を実行します。
(1) AJAX Toolkit について学び、 http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/または
http://www.asp.net/ajaxlibrary/act.ashxまたは
http://www.stackoverflow.com/からダウンロードします
。 question/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012
(2)プロジェクトにツールキットを追加し、ツールキットの任意の 1 つのコントロールで 1 つの例を作成します
(3)必要に応じて以下の例を試してください
<cc1:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnlCPTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
POS DETAILS
</td>
<td align="right" valign="top">
<asp:Label ID="lblTop" runat="server">(Show Details...)</asp:Label>
<asp:ImageButton ID="imgTop" runat="server" AlternateText="(Show Details...)" ImageUrl="App_Themes/Default/images/expand_blue.jpg" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="pnlTop" runat="server" Width="500">
<table width="100%">
<tr>
<td>
TID :
</td>
<td>
abc...
</td>
<td>
Name :
</td>
<td>
xyz ...
</td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="cpTop" runat="server" TargetControlID="pnlTop"
BehaviorID="cpTop" CollapseControlID="pnlCPTop" Collapsed="False" CollapsedImage="App_Themes/Default/images/expand_blue.jpg"
CollapsedText="(Show Details...)" ExpandControlID="pnlCPTop" ExpandedImage="App_Themes/Default/images/collapse_blue.jpg"
ExpandedText="(Hide Details...)" ImageControlID="imgTop" SuppressPostBack="True"
TextLabelID="lblTop">
</cc1:CollapsiblePanelExtender>
ウェブ設定で
<system.web>
<pages>
<controls>
<add tagPrefix="cc1" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />
これがお役に立てば幸いです。最初に AJAX Toolkit を学習してから、ツール ボックスに追加してから上記のコードを試すことをお勧めします。
別の方法は、以下のように JavaScript を使用することです。
JavaScript
<script type="text/javascript">
function funHide() {
document.getElementById('imgShow').style.display = 'block';
document.getElementById('trPOSDETAILS').style.display = 'none';
document.getElementById('imgHide').style.display = 'none';
}
function funShow() {
document.getElementById('imgShow').style.display = 'none';
document.getElementById('trPOSDETAILS').style.display = 'block';
document.getElementById('imgHide').style.display = 'block';
}
</script>
aspx または html
<table width="500px">
<tr>
<td colspan='3'>
POS DETAILS
</td>
<td align="right">
<img id='imgShow' src='App_Themes/Default/images/expand_blue.jpg' alt='Show Details...' onclick="funShow()" style='display:none;'/>
<img id='imgHide' src='App_Themes/Default/images/collapse_blue.jpg' alt='Hide Details...' onclick="funHide()" />
</td>
</tr>
<tr id="trPOSDETAILS">
<td>TID :</td>
<td>abc...</td>
<td>Name :</td>
<td>xyz ...</td>
</tr>
</table>
これで問題が解決する場合は、この回答を有用とマークしてください。