[ColResize] With Minimize button

[ColResize] With Minimize button

Hi,

I have used the ColResize plugin to resize the column.
But i wanted to implement minmize maximize the table column using buttons.

So i have put the corresponding button and write Javascript code to change the column width based onthe button.

The problem is if i click the button and i can change the column width.once i click and change the width the colResize plugin is not called(i am not able to drag the columns width).


Here is my code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.master.cs" Inherits="frameset.Site2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

    <script src="js/jquery.js"></script>

    <script src="js/colResizable-1.3.min.js"></script>




 $(function(){
         $("#sample2").colResizable();
        });








 <script type="text/javascript">
    var minmaxflag="M"
   
     function minimizemaximize()
     {
       
         var v = document.getElementById('col1').offsetWidth;
         if (minmaxflag == "M")
         {
                 document.getElementById('col1').style.width = "100%";
                document.getElementById('col2').style.width = "0";
                minmaxflag="X";

         }
         else
         {
                document.getElementById('col1').style.width = "30%";
                document.getElementById('col2').style.width = "70%";

                minmaxflag="M";
         }
       return false;
        
     }























   
      
    </script>



  

    <style type="text/css">
        .style1
        {
        }
        .style2
        {
            width: 169px;
        }
        .noborders td
        {
            border: 0;
        }
        .style6
        {
            background-color: ThreeDDarkShadow;
            height: 1px;
        }
        .style7
        {
            height: 10px;
        }
        .style8
        {
            height: 658px;
        }
        body
        {
           
            height: 700px;
        }
       
        #sample2
        {
            height :655px;
        }
    </style>

  
</head>
<body >
    <form id="form1" runat="server">
    <div class="style8">
        <table id="sample2" width="100%" align="center"  cellpadding="0" cellspacing="0"
            border="1">
           
            <tr class="style7">
                <td id="col1" align="right" class="style6">
                <%--<input type="button"  Width="26px" OnClick="minimizemaximize()" />--%>
                     <asp:Button ID="Button1" runat="server" Width="20px" OnClientClick="return  minimizemaximize()"
                        Style="margin-left: 0px" />  
                </td>
                <td id="col2" align="right" class="style6">
                    <asp:Button ID="btncontentframe" runat="server" Width="20px" OnClick="btncontentframe_Click"
                        Style="margin-left: 0px" />
                </td>
            </tr>
           
        </table>
    </div>
    </form>
</body>
</html>


Please anybody advice me to solve this problem..

Thanks,
John