title: EDIT-UPDATE BUTTONS IN Repeater control
body: <p>I have a repeater control with collapsible panel inside a div.(class header and class detail).when i click Edit button inside the detail division - cancel and update button are showing but when i click the edit button the div is collapsing and can see the update and cancel button only after clicking the row one more time..</p>
  
  <p>Every thing is working fine except below stated one.
  <strong>Each time i click edit button division is collapsing
  How can  i make the class detail stable until i do edit/cancel/update.</strong></p>
  
  <p>Thanks</p>
  
  <pre><code> &lt;style&gt;
  .header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
         background-color:#cccccc; font-family: Verdana; }
  .details { display:none; visibility:hidden; 
           font-family: Verdana; }
  &lt;/style&gt;
  
  &amp;nbsp;&lt;div style="overflow: scroll; overflow-x: hidden; overflow-y: auto;background-  color:gray;     height: 500px; width: 895px"&gt;
  
  &lt;asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"&gt;
  
        &lt;ItemTemplate&gt;
  
  
   &lt;div id='h&lt;%# DataBinder.Eval(Container, "ItemIndex") %&gt;' class="header"
     onclick='ToggleDisplay(&lt;%# DataBinder.Eval(Container, "ItemIndex") %&gt;);' style="border-style: none;"&gt;
   &lt;asp:Panel ID="Panel3" runat="server" Height="30px" BorderStyle="None" BackColor="#79FFFF"&gt;
  
  &lt;%# DataBinder.Eval(Container.DataItem, "License")%&gt; 
  &lt;%# DataBinder.Eval(Container.DataItem, "Name")%&gt;
  
  &lt;%# DataBinder.Eval(Container.DataItem," Date")%&gt;
  </code></pre>
  
  <p> 
     </p>
  
  <pre><code> &lt;div id='d&lt;%# DataBinder.Eval(Container, "ItemIndex") %&gt;' class="details"&gt;
  
   &lt;asp:Panel ID="Panel2" runat="server" Height="195px" BackColor="Gray" Font-Bold="False"   ForeColor="Maroon"&gt;
   &lt;br /&gt;
      &lt;asp:Label ID="Label1" runat="server" Text="LicenseID"&gt;&lt;/asp:Label&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  
               &lt;asp:TextBox ID="TextBox1" runat="server" Text='&lt;%# DataBinder.Eval  (Container.DataItem,"LicenseID") %&gt;' Enabled="False" BackColor="Gray"   BorderStyle="None"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:Label ID="Label2" runat="server" Text="License  Name"&gt;&lt;/asp:Label&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
               &lt;asp:TextBox ID="TextBox2" runat="server" Text='&lt;%# DataBinder.Eval(Container.DataItem,"LicenseName")%&gt;' Enabled="false" BackColor="Gray" BorderStyle="None"&gt;&lt;/asp:TextBox&gt;
  
           &lt;/asp:Panel&gt;
  
   &lt;/div&gt;
  
        &lt;/ItemTemplate&gt;  
  </code></pre>
  
  <p>Toggle display</p>
  
  <p></p>
  
  <pre><code>        function ToggleDisplay(id) {
         var elem = document.getElementById('d' + id);
         if (elem) {
              if (elem.style.display != 'block') {
              elem.style.display = 'block';
              elem.style.visibility = 'visible';
          }
          else {
              elem.style.display = 'none';
              elem.style.visibility = 'hidden';
          }
      }
      }
  </code></pre>
  
  <p></p>