javascript - JavaScriptがテーブルローカルストレージの行を非表示

Question

この数式を使用して、HTML テーブル全体を非表示にします。

function tableExpander(tableId) {
    // Our flag to determine if rows are hidden or not
    var rowsVisible = localStorage.getItem('rowsVisible-'+tableId),
        // Table handler
        table = document.getElementById(tableId);

    // "rowHidden" not exists in localStorage yet
    if (rowsVisible === null) {
        rowsVisible = true;
    } else {
       // localStorage return string
        rowsVisible = rowsVisible === 'true' ? true : false;
    }

    toggleDisplay(table, rowsVisible ? '' : 'none');

    table.getElementsByClassName('toggleBtn')[0].addEventListener('click', function() {
        toggleDisplay(table);
    }, false);

    function toggleDisplay(tbl) {    
        var tblRows = table.rows,
            mode = rowsVisible ? '' : 'none';

        for (i = 0; i < tblRows.length; i++) {
            if (tblRows[i].className != "headerRow") {
                tblRows[i].style.display = mode;
            }
        }

        localStorage.setItem('rowsVisible-'+tableId, rowsVisible);
        rowsVisible = !rowsVisible;
    };    
};

tableExpander('table');
tableExpander('table1');

一度に1行だけ非表示にし、非表示のときにボタンの色を赤に変更するにはどうすればよいですか? ここの例http://jsfiddle.net/SXAZ4/85/