Скрыть/Показать позволяет частично скрыть некоторые элементы интерфейса.
Она может быть полезна в различных ситуациях, например, когда вы хотите частично скрыть большой текст.
Не размещать 'Скрыть/Показать' внутри 'Скрыть/Показать'!
Примеры
zhid="" При первой загрузке HTML страницы:
• Экран больше 768px:
Открыто
• Экран меньше 769px:
Закрыто
<div style="margin: 7px 0; padding: 5px; border: 1px solid green"><!-- style вид рамки -->
<div zhid=""><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
<button zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
Тут содержание элемента...
</div>
</div>
zhid="1" При первой загрузке HTML страницы:
• Экран больше 768px:
Закрыто
• Экран меньше 769px:
Закрыто
<div style="margin: 7px 0; padding: 5px; border: 1px solid green"><!-- style вид рамки -->
<div zhid="1"><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
<button zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
Тут содержание элемента...
</div>
</div>
zhid="0" При первой загрузке HTML страницы:
• Экран больше 768px:
Открыто
• Экран меньше 769px:
Открыто
<div style="margin: 7px 0; padding: 5px; border: 1px solid green"><!-- style вид рамки -->
<div zhid="0"><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
<button zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
Тут содержание элемента...
</div>
</div>
Пример2:
Скрыть/Показать — любое содержан ие элемента. текст текст текст текст текст текст текст
текст текст текст текст текст текст текст..
<div style="--zHidH: 7ex;" zhid>
<div class="ram-V2 gI-inf all-c1">
<div>
<button zhidb><p><s></s></p></button>
Скрыть/Показать — любое содержан ие элемента. текст текст текст текст текст текст текст
</div>
</div>
</div>
Без рамки:
На брег песчаный и пустой,
И тридцать витязей прекрасных
Чредой из вод выходят ясных,
И с ними дядька их морской;
Там королевич мимоходом
Пленяет грозного царя;
Там в облаках перед народом
Через леса, через моря
Колдун несёт богатыря;
В темнице там царевна тужит,
А бурый волк ей верно служит;
Там ступа с Бабою Ягой
Идёт, бредёт сама собой,
Там царь Кащей над златом чахнет;
Там русский дух… там Русью пахнет!
И там я был, и мёд я пил;
У моря видел дуб зелёный;
Под ним сидел, и кот учёный
Свои мне сказки говорил.
<div style="margin: 7px 0; padding: 5px;"><!-- style вид рамки -->
<div style="--zHid:2ex" zhid="1"><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
<button zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
На брег песчаный и пустой,
И тридцать витязей прекрасных
Чредой из вод выходят ясных,
И с ними дядька их морской;
Там королевич мимоходом
Пленяет грозного царя;
Там в облаках перед народом
Через леса, через моря
Колдун несёт богатыря;
В темнице там царевна тужит,
А бурый волк ей верно служит;
Там ступа с Бабою Ягой
Идёт, бредёт сама собой,
Там царь Кащей над златом чахнет;
Там русский дух… там Русью пахнет!
И там я был, и мёд я пил;
У моря видел дуб зелёный;
Под ним сидел, и кот учёный
Свои мне сказки говорил.
</div>
</div>
zhid="" Когда экран меньше 769px автоматически скроет большую часть содержания элемента.zhid="1" Закрыто.zhid="0" Открыто.style="--zHid: 2ex;" размер видемой области.style="--zHidHs: 2.5ex;" размер затемнения снизу.style="--zHidC: red;" Цвет затемнения снизу.
Возможные изменения
Размер видемой области:
Установим style="
--zHid: 2ex; " размер видемой области.
По умолчанию = 4ex.
• ex - Высота шрифта в нижнем регистре.
- Можно использовать все виды: px, em ...
<div style="margin: 7px 0; padding: 5px; border: 1px solid green"><!-- style вид рамки -->
<!-- --zHid:2ex; - Размер видемой области -->
<div style="--zHid:2ex" zhid="1"><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
<button zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
Тут содержание элемента...
</div>
</div>
Цвет затемнения снизу:
Установим style="
--zHidC: red; " цвет затемнения снизу.
По умолчанию = white.
<div style="margin: 7px 0; padding: 5px; border: 1px solid green"><!-- style вид рамки -->
<!-- --zHidC:red; - Цвет затемнения снизу -->
<div style="--zHidC:red" zhid><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
<button zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
Тут содержание элемента...
</div>
</div>
Убрать затемнения снизу:
Установим style="
--zHidC: #0000; " цвет затемнения снизу.
По умолчанию = white.
<!-- --zHidC: #0000; - Уберает затемнение снизу -->
<div style="--zHidC: #0000;" zhid><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
<button zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
Текст текст ...
</div>
Размер затемнения снизу:
Установим style="
--zHidHs: 8ex; " размер видемой области.
По умолчанию = 2.5ex.
• ex - Высота шрифта в нижнем регистре.
- Можно использовать все виды: px, em ...
<div style="margin: 7px 0; padding: 5px; border: 1px solid green"><!-- style вид рамки -->
<!-- --zHidHs:8ex; - Размер видемой области -->
<div style="--zHidHs:8ex" zhid><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
<button zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
Тут содержание элемента...
</div>
</div>
Подключение к сайту:
<!-- Добавить в <head>..</head>: -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script>
<link href="https://zam.usite.pro/db/publ/zHid/1-0-0/m.css" rel="stylesheet">
<script src="https://zam.usite.pro/db/publ/zHid/1-0-0/m.js" defer></script>
► Исходники(css, js): github (m. - Сокращённый вариант, ok. - Подробный)
<!-- Добавить в конец <body>..</body>: -->
<script>
document.addEventListener('DOMContentLoaded', () => {
zHid.$();//★ Спрятать/Показать hid (Запускаем)
});
</script>
Плюшкидля сайта