Не все что скрыто, должно быть явным. Для этого утверждения есть множество примеров и не меньшее множество решений. Я не буду вдаваться в подробности и перебирать причины и необходимости, которые у вас могут возникнуть для скрытия информации на сайте, я хотел бы как раз поговорить об обратной стороне медали. О том, как это реализовать!
Сначала еще раз сошлюсь на пример, который уже был приведен, это скрытие полностью страницы, а в этот раз речь пойдет о частном случае, только о скрытии блока на странице. Далее только об этом...
Прежде чем приступить к основной части статьи, хотелось бы пару слов сказать о безопасности. Тот кто в курсе, сразу и при этом без моих заметок поймет, что по сути это просто такая заглушка, возможность прикрыть глаза лишь самым не искушенным в этом деле людям. Посмотреть содержимое легко можно в коде, то есть безопасность здесь минимальная. Это надо не только понимать, но и учитывать, если вам надо скрывать все же что-то серьезное и по-настоящему.
Принцип скрытия блока весьма прост. У нас есть изначальный блок, для которого прописан стиль не отображать display:none; После того как мы активируем работу функции, она подменяет стиль для бока style.display = "block" обеспечивающий визуализацию и вуаля, готово!
Сама функция срабатывает от события в форме ввода пароля, при этом в случае неверного пароля уже выполняется не подмена стиля, а вывод alert, с предупреждением, что пароль не верен.
Собственно считаю это не так уж и сложно, поэтому переходим к визуализации самого примера...
Пример 1...а также к коду.
Смотреть код
А да, пароль для отображения блока - 123.
На самом деле, если вы внимательно изучили код, то увидели, что на каждый блок назначается своя переменная для Id. Это весьма и весьма неудобно, ведь сами посудите. Скажем у нас 11,15..20 блоков, и что...!? Теперь каждый раз прописывать для каждого блока свой Id и все это отражать в коде. Очень уж не очень.
Здесь в принципе правильно было бы использовать конкретные и схожие блоки со своим уникальным классом. В нашем случае это класс как и для Id - text, а брать мы его будем с помощью getElementsByClassName (), то есть с помощью "сборщика" ссылающегося на блок с определенным классом.
Также придется прибегнуть и к еще одной хитрости. Это применению контролируемого цикла for до тех пор, пока мы на странице будем находить эти самые блоки с нужным нам классом. Каждый из этих блоков согласно его порядка также будет выводиться за счет изменения CSS в теле цикла for. Здесь даже для пущей наглядности я воткнул alert, но это уже лишнее. Его конечно же можно убрать.
Пример 2Смотреть код
...пароль тот же - 123.
Ну и еще один плюс второго метода, что здесь не надо смотреть за строгим и индивидуальным атрибутом Id для каждого блока. Просто достаточно прописать класс для блока и все!