Div slide left to right

by panchroma

HTML

<table>
    <tr>
        <td colspan="4" align="right"><a href="#" rel="lightbox" class="subtn"></a>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>sam</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>7</td>
        <td>john</td>
        <td>europe</td>
        <td style="display:none;">new</td>
    </tr>
    <tr>
        <td>4</td>
        <td>bob</td>
        <td>africa</td>
        <td style="display:none;">new</td>
    </tr>
</table>
<button>button</button>

<div class="wrap">
    <div class="you-tube">123</div>
<div class="button">button</div>
</div>

CSS

table td{ border:solid 1px red; }
table td:nth-child(4){ display: block;}

.wrap{
    width:200px;
    height:250px;
    position:absolute;
    
   
    background-color:olive;
}
button{
    float:left;
    
}
.wrap{
    border:solid grey 1px;

}
.you-tube{
    width:100px;
    float:left;
}
.button{
width:50px;
float:left;}
}

JavaScript

$( document ).ready( function () {
    var content = $( "td:nth-child(4)" ).hide();
    $( "button" ).on( "click", function() {
        content.toggle( "slide", { direction: "left" }, 1000);
    });
});


$( document ).ready( function () {
    var content = $( ".you-tube" ).hide();
    $( ".button" ).on( "click", function() {
        content.toggle( "slide", { direction: "left" }, 500);
    });
});

$( document ).ready( function () {
    var content = $( ".you-tube" ).hide();
    $( ".button" ).hover (  
        function() {
        content.toggle( "slide", { direction: "left" }, 1000);
    });
});