Форум Сайтостроение Веб-строительство

Состояние блока "показать\скрыть"

[Удален]
4156

Есть несколько способов показать\скрыть блок, например 

<a onclick="$('div#hidden_content').slideToggle('slow')">Показать/Скрыть блок</a>

или 

<script language="javascript" type="text/javascript">

function toggle(el) {

el.style.display = (el.style.display == 'none') ? '' : 'none'

}

</script>



<a onclick="toggle(hidden_content)">Показать/Скрыть блок</a>

Вопрос такой - как сделать так чтоб раскрытый блок не закрывался при перезагрузке страницы или при переходе на другую страницу (блок в сайдбаре). Т.е. чтоб сохранялось состояние блока установленное пользователем, а не сбрасывалось на "по умолчанию" при перезагрузке?

Станислав
На сайте с 27.12.2009
Offline
258
Станислав
#1

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

Мы там, где рады нас видеть.
[Удален]
#2

Ну это понятно, меня интересовала практическая реализация, так как в пхп я не разбираюсь (думал, что достаточно изменить\добавить какой-то параметр в коде)

D
На сайте с 04.01.2008
Offline
46
diff
#3

можно ещё добавить хэш в урл (http://domain.ru/index.php#myHash)

и проверять в JS этот хэш на соответвие:

var hash = window.location.hash;
if (hash == '#myHash') {
// что-то сделать, например раскрыть нужный блок
}
дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#4
x0x0:
Ну это понятно, меня интересовала практическая реализация, так как в пхп я не разбираюсь (думал, что достаточно изменить\добавить какой-то параметр в коде)

Пример с куками http://alt-f4.ru/expanding-menu-by-jquery, для меню, но можно и для блока приспособить.

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
Станислав
На сайте с 27.12.2009
Offline
258
Станислав
#5
x0x0:
Ну это понятно, меня интересовала практическая реализация

ну для практической реализации мало информации

Вот набросал рабочий примерчик вам, если что не понятно пишите 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/javascript">

// Определяем клик

$('div.close').live('click', function(){



    // Скрываем если рел равен no_close

    if($('div.close').attr("rel") == 'no_close') {



        $.ajax({

            success: function(data) {

                $('#menu div').hide(400, function() {

                    $('div.close').text("скрыли блок");

                    $('div.close').attr("rel", "yes_close");

                    document.cookie="close=yes; path=/; expires=Mon, 26 Mar 2015 20:09:01 GMT;";

                });

            }

        });

    }



    // Отменяем скрытие блока

    if($('div.close').attr("rel") == 'yes_close') {



        $.ajax({

            success: function(data) {

                $('#menu div').show(400, function() {

                    $('div.close').text("открыли блок");

                    $('div.close').attr("rel", "no_close");

                    document.cookie="close=no; path=/; expires=Mon, 26 Mar 2015 20:09:01 GMT;";

                });

            }

        });



    }

});



</script>



<?php

    $rel = $_COOKIE['close'] === 'yes' ? 'yes_close' : 'no_close';

    $style = $_COOKIE['close'] !== 'yes' ? '' : 'display:none';

?>



<div class="close" rel="<?php echo $rel?>">Скрыть/Раскрыть</div>

<div id="menu">

    <div style="<?php echo $style?>">

        ссылки<br />

        ссылки<br />

        ссылки<br />

        ссылки<br />

    </div>

</div>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий