Here is the code I currently have that is working: http://jsfiddle.net/tarabyte/s8Qds/3/
Javascript:
$(function() {
(function generateStyleSheet(len){
var styles = [], i = 0;
for(; i < len; i++) {
styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ;
}
$('<style>' + styles.join('\n') + '</style>').appendTo(document.body);
}(100))
function Toggler(idx, text, table, togglers) {
this.idx = idx;
this.text = $.trim(text);
this.table = table;
this.togglers = togglers;
this.init();
}
Toggler.prototype.init = function() {
this.element = $('<span class="toggler" >' + this.text + '</span>').appendTo(this.togglers).data('toggler', this);
};
Toggler.prototype.toggle = function() {
this.element.toggleClass('pressed');
this.table.toggleClass('hide-'+this.idx);
};
function Togglers(el, table, hidden) {
this.el = el.jQuery ? el : $(el);
this.table = table.jQuery ? table : $(table);
this.togglers = {};
this.hidden = hidden||[];
this.init();
}
Togglers.prototype.init = function() {
var columns = 0, me = this;
this.el.on('click', '.toggler', function(e){
$(e.target).data('toggler').toggle();
});
this.table.find('th').each(function(idx, header){
header = $(header);
me.add(idx, header.text());
header.addClass('column-' + idx);
columns++;
}).end()
.find('td').each(function(idx, td) {
$(td).addClass('column-' + (idx%columns));
});
$.each(this.hidden, function(_, name) {
me.toggle(name);
});
};
Togglers.prototype.toggle = function(name) {
var toggler = this.togglers[name];
if(toggler) {
toggler.toggle()
}
else {
console.warn('Unable to find column with name: ' + name);
}
};
Togglers.prototype.add = function(idx, name) {
var toggler = new Toggler(idx, name, this.table, this.el);
this.togglers[toggler.text] = toggler;
};
var togglers = new Togglers('#togglers', $('#table'), ['Color']);
togglers.toggle('Number');
})
CSS
.toggler {
display: inline-block;
padding: 5px 10px;
margin: 2px;
border: 1px solid black;
border-radius: 2px;
cursor: pointer;
}
.toggler.pressed {
background-color: #BBB;
}
HTML
<div id="togglers"></div>
<table id="table">
<tr>
<th class="Title">ID</th>
<th class="Title">Color</th>
<th class="Title">Number</th>
</tr>
<tr>
<td>1</td>
<td>#990000</td>
<td>C001</td>
</tr>
<tr>
<td>2</td>
<td>#009900</td>
<td>C002</td>
</tr>
<tr>
<td>3</td>
<td>#FFFFFF</td>
<td>C003</td>
</tr>
<tr>
<td>4</td>
<td>#000000</td>
<td>C004</td>
</tr>
</table>
I'm looking to group "Color" and "Number" so that when you click on "more info", it shows both. The order of the columns is unknown beforehand.
I attempted a solution here: http://jsfiddle.net/Ap9sQ/6/ However, I'm facing issues styling "more info" as grey by default and changing its color upon clicking.