Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>For this you can use <strong>AJAX Toolkit controls</strong> (ToolkitScriptManager and CollapsiblePanelExtender). And for that do following steps:</p> <p>(1)<strong>Learn and Download AJAX Toolkit</strong> from <br/><a href="http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/" rel="nofollow">http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/</a> or <br/><a href="http://www.asp.net/ajaxlibrary/act.ashx" rel="nofollow">http://www.asp.net/ajaxlibrary/act.ashx</a> or <br/> <a href="http://www.stackoverflow.com/questions/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012">http://www.stackoverflow.com/questions/15258994/how-to-add-ajaxcontroltoolkit-to-toolbox-in-vs-2012</a><br/> (2)<strong>Add toolkit into your project and create one example</strong> with any one control of the toolkit<br/> (3)<strong>Try below example</strong> as you want</p> <pre><code>&lt;cc1:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server"&gt; &lt;/cc1:ToolkitScriptManager&gt; &lt;asp:Panel ID="pnlCPTop" runat="server" Width="500"&gt; &lt;table width="100%"&gt; &lt;tr&gt; &lt;td&gt; POS DETAILS &lt;/td&gt; &lt;td align="right" valign="top"&gt; &lt;asp:Label ID="lblTop" runat="server"&gt;(Show Details...)&lt;/asp:Label&gt; &lt;asp:ImageButton ID="imgTop" runat="server" AlternateText="(Show Details...)" ImageUrl="App_Themes/Default/images/expand_blue.jpg" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/asp:Panel&gt; &lt;asp:Panel ID="pnlTop" runat="server" Width="500"&gt; &lt;table width="100%"&gt; &lt;tr&gt; &lt;td&gt; TID : &lt;/td&gt; &lt;td&gt; abc... &lt;/td&gt; &lt;td&gt; Name : &lt;/td&gt; &lt;td&gt; xyz ... &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/asp:Panel&gt; &lt;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"&gt; &lt;/cc1:CollapsiblePanelExtender&gt; </code></pre> <p><strong>In web config</strong></p> <pre><code>&lt;system.web&gt; &lt;pages&gt; &lt;controls&gt; &lt;add tagPrefix="cc1" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" /&gt; </code></pre> <p>I hope this may helps you. I suggest to first learn AJAX Toolkit and then add to tool box and then try above code.</p> <p>Another way is using javascript like below:</p> <p><strong>javascript</strong></p> <pre><code>&lt;script type="text/javascript"&gt; 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'; } &lt;/script&gt; </code></pre> <p><strong>aspx or html</strong></p> <pre><code>&lt;table width="500px"&gt; &lt;tr&gt; &lt;td colspan='3'&gt; POS DETAILS &lt;/td&gt; &lt;td align="right"&gt; &lt;img id='imgShow' src='App_Themes/Default/images/expand_blue.jpg' alt='Show Details...' onclick="funShow()" style='display:none;'/&gt; &lt;img id='imgHide' src='App_Themes/Default/images/collapse_blue.jpg' alt='Hide Details...' onclick="funHide()" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="trPOSDETAILS"&gt; &lt;td&gt;TID :&lt;/td&gt; &lt;td&gt;abc...&lt;/td&gt; &lt;td&gt;Name :&lt;/td&gt; &lt;td&gt;xyz ...&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p><strong>Please mark this answer useful if this solve your problem.</strong></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload