Плюшкидля сайта
Главная » Статьи » Разное
Скрыть/Показать (hidden)
Скрыть/Показать позволяет частично скрыть некоторые элементы интерфейса. Она может быть полезна в различных ситуациях, например, когда вы хотите частично скрыть большой текст.
  • zhid="" Когда экран меньше 769px автоматически скроет большую часть содержания элемента.
  • zhid="1" Закрыто.
  • zhid="0" Открыто.
Примеры
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 с рамкой:

Скрыть/Показать — любое содержан ие элемента. текст текст текст текст текст текст текст текст текст текст текст текст текст текст.. 

 <!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
 <div style="--zHidH: 7ex;" zhid><!-- --zHid:9ex; - Размер видемой области -->
   <div style="background: #070; color:#fffd; border-radius: 3px; padding: 3px;"><!-- Стиль рамки -->
     <div>
       <button zhidb><p><s></s></p></button><!-- 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>
  • class="zHid2" 2 уровень Скрыть/Показать (Размещается внутри первого Скрыть/Показать).
  • class="zHid3" 3 уровень Скрыть/Показать (Размещается внутри второго Скрыть/Показать).
Скрыть/Показать внутри Скрыть/Показать (Доступно 3 уровня)
Уровень 1:
Уровень 2 (class="zHid2"):
Уровень 3 (class="zHid3"):
чпок
Уровень 3² (class="zHid3"):
чпок
Уровень 3³ (class="zHid3"):
чпок
Уровень 3⁴ (class="zHid3"):
чпок
Уровень 2² (class="zHid2"):
чпок
Уровень 2³ (class="zHid2"):
чпок 

 <div style="--zHidH:9ex; border: 1px solid red;" zhid="0"><button zhidb><p><s></s></p></button>
   <div style="color:red;margin-bottom: 15px">Уровень 1:</div>
 
   <div class="zHid2" style="--zHidH:8ex; margin-left:15px; border: 1px solid green;" zhid="0"><button zhidb="2"><p><s></s></p></button>
     <div style="color:green; margin-bottom: 15px">Уровень 2 (class="zHid2"):</div>
 
     <div class="zHid3" style="--zHidH:3ex; margin-left: 15px; border: 1px solid #f90" zhid="1"><button zhidb="3"><p><s></s></p></button>
       <div style="color:#f90; margin-bottom: 15px">Уровень 3 (class="zHid3"):</div>
       чпок
     </div>
 
     <div class="zHid3" style="--zHidH:3ex; margin-left: 15px; border: 1px solid #f90" zhid="1"><button zhidb><p><s></s></p></button>
       <div style="color:#f90; margin-bottom: 15px">Уровень 3² (class="zHid3"):</div>
       чпок
     </div>
 
     <div class="zHid3" style="--zHidH:3ex; margin-left: 15px; border: 1px solid #f90" zhid="1"><button zhidb="3"><p><s></s></p></button>
       <div style="color:#f90; margin-bottom: 15px">Уровень 3³ (class="zHid3"):</div>
       чпок
     </div>
 
     <div class="zHid3" style="--zHidH:3ex; margin-left: 15px; border: 1px solid #f90" zhid="1"><button zhidb="3"><p><s></s></p></button>
       <div style="color:#f90; margin-bottom: 15px">Уровень 3⁴ (class="zHid3"):</div>
       чпок
     </div>
   </div>
 
   <div class="zHid2" style="--zHidH:3ex; margin-left: 15px; border: 1px solid green" zhid="1"><button zhidb><p><s></s></p></button>
     <div style="color:green; margin-bottom: 15px">Уровень 2² (class="zHid2"):</div>
     чпок
   </div>
 
   <div class="zHid2" style="--zHidH:3ex; margin-left: 15px; border: 1px solid green" zhid="1"><button zhidb><p><s></s></p></button>
     <div style="color:green; margin-bottom: 15px">Уровень 2³ (class="zHid2"):</div>
     чпок
   </div>
 </div>
  • 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="--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>

Цвет затемнения снизу:

Установим 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>

Подключение к сайту:


 <!-- Добавить в <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>: -->
 <div style="--zHidH:5ex" zhid>
   <button zhidb><p><s></s></p></button>
   Содержание...
 </div>
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     zHid.$();//★ Спрятать/Показать hid (Запускаем)
   });
 </script>

Подключение к сайту 2 (Без m.js):


 <!-- Добавить в <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">
 

 <!-- Добавить в <body>..</body>: -->
 <div style="--zHidH:5ex" zhid><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
   <button onclick="let z;(z=$(this).closest('[zhid]')).attr('zhid',+(z.attr('zhid') != 1 && z.css('max-height')=='100%'))" zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
   Содержание...
 </div>

Подключение к сайту 3 (Только css):


 <!-- Добавить в <head>..</head>: -->
 <link href="https://zam.usite.pro/db/publ/zHid/1-0-0/m.css" rel="stylesheet">
 

 <!-- Добавить в <body>..</body>: -->
 <div style="--zHidH:5ex" zhid><!-- zhid Определяет состояние открыто или закрыто при первой загрузке HTML страницы -->
   <button onclick="let z;(z=this.closest('[zhid]')).setAttribute('zhid',+(z.getAttribute('zhid') != 1 && window.getComputedStyle(z).getPropertyValue('max-height').trim()=='100%'))" zhidb><p><s></s></p></button><!-- button кнопка Открыть/Закрыть -->
   Содержание...
 </div>
Категория: Разное | Добавил: zam (30.07.2024)
Просмотров: 127 | Теги: Скрыть/Показать, JavaScript, Спрятать/Показать, JS, Hidden, jQuery, HTML, css | Рейтинг: 0.0/0
Всего комментариев: 0
Войдите:
avatar