How to hide previously all opened Details Row on click

shreep

Hi, I am new to datatables.net.

I am trying to simply try to display some extra details on FIRST cell click. (something like https://datatables.net/examples/api/row_details.html) . The only change I want to do is as soon as any cell in first column is clicked, I want to close (all/any) existing row details, before opening detail for the clicked cell.

I am using code like below (but no success)

                tbl.dt= j$('#dt');
                var rowExpCol= '<i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i>';
                var rowAct= '<a class="on-default edit-row" href="#"><i class="fa fa-pencil"></i></a>&nbsp;&nbsp;<a class="on-default pl-sm remove-row" href="#"><i class="fa fa-trash-o"></i></a>';
                tbl.dtInstance= tbl.dt.DataTable({
                                    responsive: true,
                                    data: [],
                                    "columns": [
                                        {"width": "8%", "targets": [ 0 ],  "data": null,    title: "",       "searchable": false, "defaultContent": rowExpCol, "orderable": false, className: "center"  },                          
                                        {"width": "37%", "targets": [ 1 ],  "data": "drwN",  title: "Name",   "searchable": true },
                                        {"width": "24%", "targets": [ 2 ],  "data": "drwPh", title: "Phone",  "searchable": true },
                                        {"width": "0%", "targets": [ 3 ],  "data": "",      title: "Address","visible": false, "searchable": false, className: "hidden-phone"},
                                        {"width": "24%", "targets": [ 4 ],  "data": "drwFx", title: "Fax",    "visible": true, className: "hidden-phone"},
                                        {"width": "0%", "targets": [ 5 ],  "data": "drwA1", title: "drwA1",  "visible": false},
                                        {"width": "0%", "targets": [ 6 ],  "data": "drwCty",title: "drwCty", "visible": false},
                                        {"width": "0%", "targets": [ 7 ],  "data": "drwS",  title: "drwS",   "visible": false},
                                        {"width": "0%", "targets": [ 8 ],  "data": "drwC",  title: "drwC",   "visible": false},
                                        {"width": "0%", "targets": [ 9 ],  "data": "drwZ",  title: "drwZ",   "visible": false},
                                        {"width": "0%", "targets": [ 10 ], "data": "drwFN", title: "drwFN",  "visible": false},
                                        {"width": "0%", "targets": [ 11 ], "data": "drwMN", title: "drwMN",  "visible": false},
                                        {"width": "0%", "targets": [ 12 ], "data": "drwLN", title: "drwLN",  "visible": false},
                                        {"width": "0%", "targets": [ 13 ], "data": "drwDrI",title: "drwDrI", "visible": false},
                                        {"width": "0%", "targets": [ 14 ], "data": "drwI",  title: "drwI",   "visible": false},
                                        {"width": "8%", "targets": [ 15 ], "data": null,    title: "Action", "searchable": false, "visible": true, "defaultContent": rowAct, className: "center" }
                                    ],
                                    "columnDefs": [
                                        { "targets": [ 0 ], "width": "5%", "orderable": false  },
                                        { "targets": [ 3 ], "width": "30%" , "render": function(data, type, row){
                                                var str= "";
                                                if(row["drwA1"] !== "undefined" || row["drwA1"] != "-")
                                                    str= row["drwA1"];
                                                if(row["drwCty"] !== "undefined" || row["drwCty"] != "-" )
                                                    str+= " " + row["drwCty"];
                                                if(row["drwS"] !== "undefined" || row["drwS"] != "-")
                                                    str+= ", " + row["drwS"];
                                                if(row["drwZ"] !== "undefined" || row["drwZ"] != "-")
                                                    str+= " " + row["drwZ"];                            
                                                return str; //
                                            } 
                                        }
                                    ]                   
                                }); 


                tbl.dt.on('click', 'i[data-toggle]', function () {
                    var tr = j$(this).closest( 'tr' ).get(0)
                    var row = tbl.dtInstance.row(tr);

                    tbl.dtInstance.rows().every( function ( rowIdx, tableLoop, rowLoop ){
                        if(tbl.dtInstance.rows(rowIdx).child.isShown()){
                         
                            this.child.remove();
                            //// Error !! As on below line its not able to resolve "this"
                            this.cell().node().removeClass( 'fa-minus-square-o' ).addClass( 'fa-plus-square-o' )
                        }
                    });

                    if ( row.child.isShown() ) {
                        row.child.hide();
                        j$(this).removeClass( 'fa-minus-square-o' ).addClass( 'fa-plus-square-o' );
                    }
                    else {
                        // Open this row
                        row.child( format(tbl.dtInstance, row.data()) ).show("slow");
                        j$(this).removeClass( 'fa-plus-square-o' ).addClass( 'fa-minus-square-o' );
                    }
                }); 

shreep

A sample example of the problem
https://newdev-med.cs12.force.com/medtexter/randd

The first column cells, when clicked opens up the details but next cell click in the same column do not change the "-" to "+" for the closed row.