Jquery Tab Set Hiddenfield Value

Question

Your assistance is greatly appreciated --
I have spent a few hours reading a variety of answers here and via Google and must be overlooking something.

I am using JQuery Tabs (JQuery 1.9.1 / JQuery UI 1.10.3) with Asp.Net and want to maintain the selected tab on postback.
The tabs are within an UpdatePanel.
The active: <%= hdnSelectedTab.Value %> portion is working because I can manually set the value for the hiddenfield and that tab is selected on postback.
However, I am unable to change the value of the hiddenfield.

My JavaScript is:

    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs({
                show: function() {
                    var sel = $('#tabs').tabs('option', 'active');
                    $("#<%= hdnSelectedTab.ClientID %>").val(sel);
                },
                active: <%= hdnSelectedTab.Value %>
                });
        })
    </script>

My tab structure is:

<asp:ScriptManager ID="scriptmanager" runat="server" />
    <asp:UpdatePanel runat="server" ID="tabpnl">
    <ContentTemplate>
        <tr>
            <td colspan="4">
            <br />
            <div id="tabs">
                <ul>
                    <li><a href="#tab-1" runat="server" id="tab1id">Tab1</a></li>
                    <li><a href="#tab-2" runat="server" id="tab2id">Tab2</a></li>
                    <li><a href="#tab-3" runat="server" id="tab3id">Tab3</a></li>
                    <li><a href="#tab-4" runat="server" id="tab4id">Tab4</a></li>
                </ul>
                <asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
                    <div id="tab-1">
                        <table id="transaction2">
                            <tr>
                                <td id="tdpmt1" runat="server">
                                    <asp:Label ID="lblpmt1" runat="server" Text="Payment 1" CssClass="header" /></td>
                            </tr>
                            ....more code....

Edit in response to Aristos

I dropped in your code but no luck. The postback still resets the selected tab to the first tab. The trigger for the postback I am using for testing is a dropdownlist with an OnSelectedIndexChanged event that changes the text of a label. Both the dropdownlist and the label are within the UpdatePanel. Here is that code:

<asp:DropDownList ID="invoicestatusddl" runat="server" CssClass="dropdown" AutoPostBack="true" OnSelectedIndexChanged="invoicestatusddl_SelectedIndexChanged">
    <asp:ListItem Text="Invoiced" Value="1" Selected="True" />
    <asp:ListItem Text="Future" Value="0" />
</asp:DropDownList>

and

protected void invoicestatusddl_SelectedIndexChanged(object sender, EventArgs e)
{
    if (invoicestatusddl.SelectedValue == "0")
    {
        lblinvdate.Text = "Future Invoice Date:";
    }
    else
    {
        lblinvdate.Text = "Date Invoiced:";
    }
}

Answer 1

I ended up writing separate functions for each tab link. As follows:

<script>
    function changeHidden0(){
        document.getElementById("hdnSelectedTab").value = 0;
    }
    function changeHidden1(){
        document.getElementById("hdnSelectedTab").value = 1;
    }
    function changeHidden2(){
        document.getElementById("hdnSelectedTab").value = 2;
    }
    function changeHidden3(){
        document.getElementById("hdnSelectedTab").value = 3;
    }
</script>

Thanks Aristos for your help, you gave me some additional wording for my Google searches that helped me figure this out.