Аккордеон сохраняет открытую карту и открывает ее после обратной передачи

Question

Ну, после целого дня борьбы с этим, в поисках примеров, как люди это делали, я не смог привести его в рабочее состояние ...

Я использую ASP. NET (C#) с Bootstrap 4.4 Accordion, который работает нормально (показывает div при нажатии на заголовок карты).

Но я не смог заставить работать постоянное состояние показанной карты. По умолчанию я показываю первую карточку с ее содержимым, когда пользователь заходит на страницу. Но когда он просматривает карточки, и какой-то флажок или что-то вызывает обратную передачу, тогда загружается состояние по умолчанию.

Я пытаюсь сохранить идентификатор заголовка карты, когда он нажимается, и если тело карты вызывает обратную передачу, получить значение скрытого поля и показать последнюю открытую карту.

Любая помощь высоко ценится, потому что я не очень знаком с javascript / jquery.

Спасибо.

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="/Scripts/jquery-3.4.1.js"></script>

<asp:HiddenField ID="hfAccordionIndex" runat="server" />

<div class="container">
    <div class="accordion" id="accordionSetup">
        <h2 class="mb-3">Accordion</h2>
        <div class="card shadow mb-2">
            <div class="card-header" id="headingOne" style="transform: rotate(0);">
                <a class="collapsed card-title text-dark stretched-link" id="linkOne" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne" data-target="#collapseOne" href="#collapseOne">
                 First Link
                </a>
            </div>
            <div id="collapseOne" class="collapse show" data-parent="#accordionSetup">
                <div class="card-body">
                    Something in body
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow mb-2">
        <div class="card-header" id="headingTwo" style="transform: rotate(0);">
            <a class="collapsed card-title text-dark stretched-link" id="linkTwo" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo" data-target="#collapseTwo" href="#collapseTwo">
             Second link
            </a>
        </div>
        <div id="collapseTwo" class="collapse" data-parent="#accordionSetup">
            <div class="card-body">
                Something in body
            </div>
        </div>
    </div>


    <div class="card shadow mb-2">
        <div class="card-header" id="headingThree" style="transform: rotate(0);">
            <a class="collapsed card-title text-dark stretched-link" id="linkThree" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree" data-target="#collapseThree" href="#collapseThree">
              Third link
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-parent="#accordionSetup">
            <div class="card-body">
                Something in body
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        var last = $("#input[id=hfAccordionIndex]").val();

        if (last != null) {
            $(last).find('.collapse').addClass('show');
        }

        $("#linkOne").click(function () {
            $("#input[id=hfAccordionIndex]").val("headingOne");
        });
        $("#linkTwo").click(function () {
            $("#input[id=hfAccordionIndex]").val("headingTwo");
        });
        $("#linkThree").click(function () {
            $("#input[id=hfAccordionIndex]").val("headingThree");
        });
    });

</script>

Answer 1

Благодаря @ jishan-siddique

Наконец-то все работает правильно, я решил использовать sessionStorage вместо localStorage, но он работает!

Спасибо!

<script type="text/javascript">
    $(document).ready(function () {
        var last = sessionStorage.getItem('accordion');

        if (last != null) {
            $('#collapseOne').removeClass('show');
            $('#' + last).addClass('show');
        }
    });
    $("#linkOne").click(function () {
        sessionStorage.setItem('accordion', "collapseOne");
    });
    $("#linkTwo").click(function () {
        sessionStorage.setItem('accordion', "collapseTwo");
    });
    $("#linkThree").click(function () {
        sessionStorage.setItem('accordion', "collapseThree");
    });
</script>