Как сохранить скрытый div активным при перезагрузке страницы?

Question

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

Вот мои html коды

<button class="btn btn-success advancedSearch">Advanced search</button>

<section id="search-banner" style="padding: 0px; ">
<div class="row">
    <div class="main-heading">
        <br><br><br><br>
        <h3>Advanced search</h3>
    </div>
</div>
<div class="container">
    <div class="row text-center pb-4">
        <div class="col-md-12">
            <!--Header Text-->
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ url('/advanced-search') }}" method="get">
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group ">
                                    <select name="categoryId" id="inputState1" class="form-control">
                                        <option></option>

                                            </optgroup>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group ">
                                    <select name="cityId" id="inputState2" class="form-control">
                                        <option></option>

                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group ">
                                    <select name="salaryId" id="inputState3" class="form-control">
                                        <option></option>

                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group ">
                                    <select name="educationId" id="inputState4" class="form-control">
                                        <option></option>

                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group ">
                                    <select name="experienceId" id="inputState5" class="form-control">
                                        <option></option>

                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <button style="width: 100%" type="submit" class="btn btn-primary">Search</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Вот мой javascript код

<script>
$(document).ready(function () {
    $('#search-banner').hide();
    $('.advancedSearch').on('click', function () {
        $('#search-banner').fadeToggle();
    });

});

Мне нужна ваша помощь, ребята, чем вы очень сильно.

Answer 1

попробуйте использовать функцию localstorage для сохранения вашего последнего действия.

$(document).ready(function () {
    /* you need to replace page and advanced-search-page, but the logic is like this */
    if ( localStorage.getItem("banner_toggle") === null && page=='advanced-search-page') {
        $('#search-banner').hide();
    }
    $('.advancedSearch').on('click', function () {
        $('#search-banner').fadeToggle();
        if ( localStorage.getItem("banner_toggle") === null) {
             localStorage.setItem("banner_toggle", true);
        } else {
             localStorage.removeItem("banner_toggle");
        }
    });
});

Answer 2

Просто удалите этот кусок кода, если вы хотите, чтобы он всегда был виден, и скрывайте его при нажатии

 $('#search-banner').fadeToggle();

Функция переключения jquerys переключает между отображением и скрытием элементов. Вы можете прочитать больше об этом здесь .

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

$(document).ready(function () {
    $('.advancedSearch').on('click', function () {
        $('#search-banner').fadeToggle();
       $('#search-banner').hide();
    });

});