Maintain state of collapsible row on refresh

Question

I am trying to maintain whether a row in the table has been expanded or collapsed on refresh of the page. I am using PHP and Jquery right now to expand and collapse on the click of an image. Here is my html code.

<td style=".$style."><img src='images/triangle-right.png' width='15px' height='15px' id='treeview_".$counts."' name='".$row[0]."'class='treeview' />&nbsp".$row[0]."</td>

And here is the jquery to collapse and expand on click

$(function() {
    $('.treeview').click(function(){
        var id = $(this).attr('id');
        var id2 = id.split('_');
        var num = id2[1];
        var row = $(this).attr('name');
        if($('#subrow_'+num).is(':visible'))
        {
            $('#treeview_'+num).attr('src', 'images/triangle-right.png');
            $('#subrow_'+num).hide();
        }
        else
        {
            $('#treeview_'+num).attr('src', 'images/triangle-down.png');
            $('#subrow_'+num).show();
        } 
    });
})

Any pointers are appreciated.

Answer 1

You could set/unset an url variable whenever the user expand/shrinks a row, something like:

www.blablabla.com/list?expandedRow=3

then on the onReady event of javascript you could check if that variable is defined and show the expanded row like:

let searchParams = new URLSearchParams(window.location.search);
let expandedRow = searchParams.get('expandedRow');
if(expandedRow){
    $('#subrow_'+expandedRow).show();
}