Animate table column to hide/show it

Question

I have a very simple table, i try to animate the first column if i press on it.

After the click it should animate to the left, so that it is not fully displayed anymore:

Then after another click, it should animate back again

I tried to achieve this with jquery, but nothing happens:

var main = function()
{
    $boolean = true;
    
    $(".test").click
    (
       function()
       {
          if ($boolean)
      	  {
             $boolean = false;
             $(".test").animate
             (
                {
                   'left':'-=100px'
                },
                "fast"
             );  
           }
      	   else
      	   {
                $boolean = true;
                $(".test").animate
                (
                    {
                        'left':'+=100px'
                    },
                    "fast"
                );  
           }    
       }
  );
}
$(document).ready(main);

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

.test {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
  <th class="test">Filename</th>
  <th>value</th>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
</table>

Why is it not animating and how can i solve it? Thank you

Answer 1

Here is a working solution:

var main = function()
{
    $boolean = true;
    
    $(".test").click
    (
       function()
       {
          if ($boolean)
      	  {
             $boolean = false;
             $(".test").animate
             (
                {
                   'max-width':'10px'
                },
                "fast"
             );  
           }
      	   else
      	   {
                $boolean = true;
                $(".test").animate
                (
                    {
                        'max-width':'300px'
                    },
                    "fast"
                );  
           }    
       }
  );
}
$(document).ready(main);

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

.test {
    color: red;
    overflow: hidden;
    max-width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
  <th class="test">Filename</th>
  <th>value</th>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
</table>

https://jsfiddle.net/zcb0a9tz/