I'd like to double click this td element and have #heythere toggle too

gistfile1.txt

HTML
----

<table class="table table-striped">
    <tbody>
        <tr class="diary_hour"><!-- Hour Row Start -->
            <td class="span1" data-toggle="collapse" data-target="#heythere" title="Got a question? Drop us a line.">
                <h4>Click Here</h4>
            </td>
            <td class="test"> <!-- I'd like to double click this td element and have #heythere toggle too -->                
                <a href="#" class="noaction" data-toggle="collapse" data-target="#heythere"><i class="icon-eye-open"></i></a>     
                <div class="collapse" id="heythere">
                    This div is hidden by default. Click the eye icon or the RHS TD to open it.
                </div>
            </td> 
        </tr><!-- Hour Row End -->
    </tbody>
</table>​


Javascript
-----------

$(function(){

$(".test").dblclick(function(event) {
    event.preventDefault();
    alert("Click!");
    $("#heythere").collapse('toggle'); 
});
  
});


CSS
----
.test {
    
    
    border: solid 1px;
}​