Toggle Button

by karin

HTML

<div>
    <button>Hide</button>
    <button>Show</button>
</div>
<table border="1">
    <tr><td>1</td><td>11</td><td>111</td></tr>
    <tr><td>2</td><td>22</td><td>222</td></tr>
    <tr><td>3</td><td>33</td><td>333</td></tr>
    <tr><td>4</td><td>44</td><td>444</td></tr>
</table>

CSS

button, textarea, input { outline:none; }
table {
    width:200px;
    background:orange;
}
button {
    margin:0;
}
div button:nth-child(2) {
    margin-left:-6px;
    border-left:2px ridge #444;
}
.btn {
    display: inline-block;
    *border-bottom: 0 none #b3b3b3;
    display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    /*text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);*/
    background-color: #333;
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-left: 0em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    background-image: linear-gradient(to bottom, #333, #111);
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    /***border-left-style: none;*/
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #fff;
    background-color: #555;
    *background-color: #555;
    background-image: linear-gradient(to bottom, #111, #000);
    border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.9);
    border:thin solid #111;
 
}
.btn:active, .btn.active {
    background-color: #333;
}
.btn:first-child {
    *margin-left: 0;
    margin-left: 0;
}
/*BUTTON PRESSED*/
 .btn-pressed {
   ...

JavaScript

var btn1 = $("div button:first-child");
var btn2 = $("div button:nth-child(2)");
var myDiv=$("div");

btn1.addClass("btn-pressed");
btn2.addClass("btn");

$( "button" ).click(function() {
    $( "table tr td:nth-child(2)" ).toggle( "slow", function() {
    // Animation complete.
        btn1.removeClass("btn-pressed");
        btn1.addClass("btn");
  });
});