Hiding A Column - Slicker?

HTML

<div id="grid">
    <div class="grid-row">
        <div>Column 1</div>
        <div>Column 2</div>
        <div>Column 3</div>
    </div>
    <div class="grid-row">
        <div>Data1-1</div>
        <div>Data2-1</div>
        <div>Data3-1</div>
    </div>
    <div class="grid-row">
        <div>Data1-2</div>
        <div>Data2-2</div>
        <div>Data3-2</div>
    </div>
</div>
<input id="checkone" type="checkbox" checked>  Show Column 1</input>
<input id="checktwo" type="checkbox" checked> Show Column 2</input>

CSS

#grid {
    font-family: arial;
    font-size: 10pt;
    font-weight: normal;
    margin-bottom:2em;
}
div.grid-row{overflow:hidden;}
div.grid-row>div {
    float:left;
    border-bottom: 1px solid #696969;
    padding:5px 10px 5px 10px;
    width:10em;
}

JavaScript

$("#checkone").on("click", function(){$("div.grid-row>div:nth-child(1)").toggle("slow");});

$("#checktwo").on("click", function(){$("div.grid-row>div:nth-child(2)").toggle("slow");});