Changing the html content of a cell onClick?

jstemper

I have a datatable rendering a master/detail sort of display using code found here.
When I init the table I user a render function to add a "plus" icon to one of the cells. The idea being that when you click on that plus icon the detail expands. This works great. What I am trying to do is change that plus icon to a "minus" icon when the detail table is being shown so that it indicates that you click it to close the detail table.

My onClick function is straight from the examples.

$('#indexTable tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = rollup.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });

The function I call on rendering the column is:

var detail = function (data, type, full, meta) {
                if (data != null ) {
                    return '<i class="fa fa-plus-square-o fa-2x" title="'+data+'"></i>'
                } else if (data == null) {
                    return 'N/A'
                }
            };

I'm trying to figure out the proper way to change the contents of that rendered column to:

<i class="fa fa-minus-square-o fa-2x" title="'+data+'"></i>