How to toggle detail-control button

Pennywise

My question is related to this question: https://datatables.net/forums/discussion/40482

Specifically, I am using the following code to hide the child details when a user navigates away from the page:

        window.addEventListener("pagehide", function(e) {
            $( "tr" ).each(function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                if (row.child.isShown()) {
                    tr.removeClass( 'details' );
                    row.child.hide();
                };
            });
        });

My problem is that when I click the back button, the child row is hidden like I want, but the details button is still red with the minus sign. How can I toggle just the details button back to green after hiding the child? My details button is not in a separate column, but appears in whichever is the left most column. Basically I want to revert the table back to its original state upon navigating away. This is normal behavior in desktop browsers, but in mobile browsers the details remain open and appear when the user hits the back button, so I want to hide the child though my function above on pagehide and reset the details button from red back to green. Can someone help with the last part? Thanks!

Pennywise

Here is my working (so far..) code:

        window.addEventListener("pagehide", function(e) {
            $( "tr" ).each(function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('parent');

                };
            })
        })