1

Всем привет, есть такой скриптец:

 var openSerchButton = document.getElementById('hidden_content');
            function onclickOpen() {
                openSerchButton.style.display = (openSerchButton.style.display === 'inline') ? '' : 'inline';
                localStorage.setItem('hide', openSerchButton.style.display); 
            }
            if (localStorage.getItem('hide') === 'inline') { 
                document.getElementById('hidden_content').style.display = 'inline';
            }
            <button class="btnCollor btn  btn-md btn-success" 
                    data-toggle="tooltip" 
                    data-placement="right" 
                    title="Натисніть для виклику фільтра" 
                    onclick="onclickOpen()">
                <span>Кнопка</span>
            </button>
        </div>

        <div id="hidden_content" style="display: none; margin-top: 15px;" class="container-fluid " >
            <div class="panel panel-default">
                <div id="headFiltPan" class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1">Зазначте параметри для перегляду даних у разі необхідності</a>
                    </h4>
                </div>

                <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="container-fluid">
                            <div class="row">
                                <form  class="searchTmi pull-left" style="padding-right: 5px;" method="get" name="frm" action="SearchSki">


                                    <input name="page" id="page" value="1">
                                    <input type="hidden" name="count" id="count" value="0">
                                    <input class="rawOnpage" type="hidden" name="pages" value="${pages}">

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

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

5
  • сохраняйте состояние в localStorage 2 мая 2018 в 7:04
  • @MedvedevDev пробую сделать так: var openSerchButton = document.getElementById('hidden_content'); function onclickOpen() { openSerchButton.style.display = (openSerchButton.style.display === 'inline') ? '' : 'inline'; localStorage.setItem('hide', openSerchButton.style.display); // сохраняем значение в ключ hide } if (localStorage.getItem('hide') === 'inline') { // если значени е ключа hide "inline" document.getElementById('hidden_content').style.display = 'inline'; } не получается...
    – Sorpok
    2 мая 2018 в 7:18
  • открывает форму, но не закрывает, и после перезагрузки все равно прячет
    – Sorpok
    2 мая 2018 в 7:19
  • Вставьте весь код что у вас есть относительно этого функционала в тело вопроса. 2 мая 2018 в 7:26
  • почему-то оно тут форму не показывает
    – Sorpok
    2 мая 2018 в 7:41

1 ответ 1

1
var openSerchButton = document.getElementById('hidden_content');

openSerchButton.style.display = localStorage.getItem('hide'); // При загрузке страницы смотрим в localStorage и применяем значение

function onclickOpen() {
  var state = openSerchButton.style.display === 'block' ? 'none' : 'block';

  openSerchButton.style.display = state; // Изменяем значение display
  localStorage.setItem('hide', state); // Изменяем значение в localStorage
}

P.S. Совет на будущее, именуйте более очевидно.

3
  • Работает, но есть одна проблема, теряется в div класс container-fluid
    – Sorpok
    2 мая 2018 в 7:49
  • @СергейНиконенко, что значит "теряется"? С классом этот код ничего не делает, только меняет инлайн стили. Предположу, что он как-то иначе начинает выглядеть и опять же предположу, что изначально он display: block; а по вашему коду вы его делаете display: inline; Если так, то поправил в ответе, если нет, то требуются пояснения. 2 мая 2018 в 7:54
  • да,вы правильно предположили по поводу display: block;, спасибо больше
    – Sorpok
    2 мая 2018 в 7:58

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.