Раскрывающиеся блоки с скрытым содержанием с помощью css3

Способ №2

Абсолютно, такой же скрипт как и способ номер один, за исключением того, что он реализован не много по другому и имеет множество настроек.

jQuery

Простой вызов:

1	$('article').readmore();

Можно вызвать с дополнительными опциями:

$('article').readmore({
    speed 75,
    maxHeight 500
});

Опции:

100 (в миллисекундах) 200 (в пикселях) 16 (в пикселях, позволяет избежать ломания блоков, которые лишь немного больше заданной высоты — maxHeight) ‘‘ ‘‘ true (вставляет динамический CSS стили, установите false, если все стили вы будете подключать сами в своём файле стилей)‘display: block; width: 100%;’ (устанавливает стиль блоков) false (по дефолту блок скрыт, при параметре true — текст будет показан полностью, но с возможностью скрыть) ‘readmore-js-expanded’ (класс добавляемый к развернутому блоку) ‘readmore-js-collapsed’ (класс добавляемый к свернутому блоку) function() {} ( функция вызываемая после нажатия на кнопку «Подробнее» или «Скрыть», но до того, как блок свернется или развернется) function() {} ( функция вызываемая после того, как блок развернется или свернется) Если у элемента задана максимальная высота в CSS стилях, то скрипт будет использовать именно это значение, а не значение опции maxHeight

Обратный вызов:

Функции обратного вызова, beforeToggle() и afterToggle() получают те же самые аргументы: trigger, element и more.кнопки «Подробнее» или «Скрыть» блок, который в настоящее время сворачивается или разворачиваетсяboolean, true — означает, что блок разворачивается

Пример обратного вызова.

Вот пример использования функции afterToggle, для прокрутки к верхней части блока, когда нажата кнопка «Скрыть»:

$('article').readmore({
    afterToggle function(trigger, element, more) {
        if(! more) { // кнопка "Скрыть" была нажата
            $('html, body').animate({
                scrollTop element.offset().top
            },{
                duration 100
            });
        }
    }
});

Отключить функционал скрипта можно так:

1	$('article').readmore('destroy');

Или же вы можете указать элемент, на котором скрипта не должен работать:

1	$('article:first').readmore('destroy');

CSS

По умолчанию скрипт вставляет следующий CSS код на страницу:

CSS

.readmore-js-toggle, .readmore-js-section {
    display block;
    width 100%;
}
.readmore-js-section {
    overflow hidden;
}

С помощью опции скрипта можно изменить первое правило:

1
2
3

$('article').readmore({
    sectionCSS 'display: inline-block; width: 50%;'
});

Если вы хотите использовать свой файл стилей, то в настройках скрипта укажите false:

1
2
3

$('article').readmore({
    embedCSS false
});

Скрываем элемент со страницы

Чтобы окно не показывалось, нужно написать свойство . Но бывает так, что CSS игнорирует такие команды, если это же свойство задаётся чуть позже в другом месте. Если нужно, чтобы команда выполнилась несмотря ни на что, после команды пишут слово — именно так, с восклицательным знаком в начале. Это говорит о том, что у команды приоритет над всеми остальными и её нужно исполнять:

Осталось вставить эту команду в нужное место. Оставляем синюю линию Инспектора на той же строке и переходим на вкладку Styles:

Там как раз прописаны все CSS-стили, которые отвечают за свойства и поведение этого элемента. Находим в самом верху блок , щёлкаем в нём на свободном месте и вставляем нашу команду :

Картинка исчезла, но осталось затемнение, которое всё равно мешает читать. Разберёмся и с этим: щёлкаем правой кнопкой мыши в любом месте затемнения, выбираем «Посмотреть код», вставляем в нашу команду — готово.

Обрезка до нужного числа строк (без многоточия)

Принцип обрезки будет простой: оставить в видимой области необходимое количество строк, а остальные вынести за пределы контейнера и скрыть.
Возьмем для примера абзац текста, который не должен превышать по высоте 80px, а всё, что сверх, должно быть скрыто.

<div class="truncate-text">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
</div>

Способ первый — грубо обрезаем текст до видимой области. Почему грубо, расскажу ниже.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
}

Задаем ограничение по высоте () и свойство overflow, отвечающее за отображение содержимого за границами родительского контейнера (). Для наглядности контейнеру задан фон. Ниже можно видеть, как работает свойство : пример слева без этого свойства (значение по умолчанию visible), справа — с ним (значение hidden).

Осталось добавить градиент того же цвета, что и фон. Используем для этого псевдоэлемент after с аюсолютным позиционированием.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
  position: relative;
}

.truncate-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, transparent, #c8ad90 50%);
}

Следует отметить, что в идеале можно было бы задавать высоту блока кратной высоте строки, чтобы он всегда вмещал целое число строк в видимой области. Или наоборот, заложить под последнюю строку меньше высоты целой строки, чтобы получить эффект наполовину срезанных букв не за счёт градиента.

Как вы могли заметить, у нашего блока были заданы внутренние отступы (padding), и свойство overflow обрезало текст не по границе этих отступов, а по границе блока. В результате мы потеряли отступ снизу, и текст прилегает к нижнему краю блока. Конечно, мы сгладили этот недочет с помощью градиента, но это повод упомянуть о втором способе.

Итак, способ второй — используем колонки.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
  column-width: 200px;
}

Чтобы была понятна разница, покажу как это выглядит без свойства overflow. Текст переносится во вторую и третью колонки, при этом учитываются внутренние отступы, и вы не получите наполовину обрезанную по высоте строку.

Здесь становится видно, что блок плохо подогнан по высоте под 3 строки, слишком много места остается снизу. Поэтому предлагаю явно задать высоту строки и рассчитать для неё высоту блока.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  overflow: hidden;
  column-width: 200px;
  line-height: 1.3em;
  height: 3.9em;
}

Далее можно добавить градиент, как это делалось выше, откорректировав его высоту.

Использование display для строчных элементов

Свойство CSS display также используется для изменения поведения строчных и блочных элементов.

Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.

Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span, тег ссылки и т.д.

Свойство HTML display позволяет изменять поведение строчных и блочных элементов.

Чтобы изменить поведение блочного элемента на поведение строчного:

display: inline;

Чтобы изменить поведение строчного элемента на поведение блочного:

display: block;

В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.

Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:

Посмотреть онлайн демо-версию и код

На странице демо-версии отображен родительский div, а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:

Родительский div очерчен черной рамкой и занимает всю доступную ширину;
span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.

Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:

Посмотреть онлайн демо-версию и код

span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!

Пожалуйста, оставьте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!

Вадим Дворниковавтор-переводчик статьи «CSS display and visibility: 6 examples to show/hide HTML elements»

10 ответов

Лучший ответ

Без CSS это невозможно. Фактически, тег просто добавляет к тексту с помощью встроенного в браузер CSS.

Вот что вы можете сделать:

145

Alfred Xing
10 Июл 2014 в 18:07

Используйте следующие коды CSS …

Shakeel Ahmed
13 Июл 2016 в 07:53

Без CSS вы в основном застряли с использованием тега изображения. В основном сделайте изображение текста и добавьте подчеркивание. По сути, это означает, что ваша страница бесполезна для программы чтения с экрана.

С CSS это просто.

HTML:

CSS:

Пример страницы

animuson
29 Янв 2014 в 22:26

В элементе HTML5 может быть пунктирное подчеркивание, поэтому нижний текст будет иметь пунктирную линию, а не обычное подчеркивание. А атрибут title создает всплывающую подсказку для пользователя, когда он наводит курсор на элемент:

ПРИМЕЧАНИЕ. Пунктирная граница / подчеркивание по умолчанию отображается в Firefox и Opera, но IE8, Safari и Chrome нуждаются в строке CSS:

Fatima Waheed
11 Июл 2016 в 14:14

Ответ переформатирован на @epascarello :

anatoly techtonik
26 Дек 2015 в 06:54

Если в контенте больше одной строки, добавление нижней границы не поможет. В этом случае вам придется использовать,

Если вам нужно больше места между текстом и строкой, просто используйте,

Darshana Gunawardana
9 Окт 2018 в 10:19

Вы можете попробовать этот метод:

Обратите внимание, что без у вас все равно будет пунктирная линия подчеркивания, но это свойство даст ему больше места для передышки. Предполагается, что вы хотите встроить все в HTML-файл, используя встроенный стиль, а не использовать отдельный CSS-файл или тег

Предполагается, что вы хотите встроить все в HTML-файл, используя встроенный стиль, а не использовать отдельный CSS-файл или тег.

Mona Jalal
5 Фев 2020 в 00:12

Может, я немного опоздал, но просто используйте , это единое свойство CSS, которое можно использовать везде.

Встроенный HTML

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

Как сказал Даршана Гунавардана, вы можете использовать , чтобы между текстом и строкой оставалось больше места:

В отдельном файле CSS

BarryCap
14 Авг 2021 в 10:46

Вы можете использовать нижнюю границу с опцией .

Neel
24 Янв 2020 в 07:16

Это не невозможно без CSS. Например, как элемент списка:

-2

mirichan
1 Сен 2015 в 08:00

Логика адаптивной вёрстки Desktop First

Предположим, есть макет шириной 1170px. Верстаем его в браузере на большом экране. Пишем основные стили. Когда десктоп версия макета готова, начинаем делать адаптивную вёрстку.

Устанавливаем ширину окна браузера в 1200px — минимальная ширина до первого @media запроса .

Проверяем вёрстку при этих размерах. Если вёрстка соответствует макету, элементы не выходят за границы окна браузера, и не появляется горизонтальной полосы прокрутки, то продолжаем.

Устанавливаем ширину браузера в 992px — минимальная ширина до следующего @media запроса

Делаем первый @media запрос —

При ширине окна браузера 992px элементы сужаются, выходят за границы окна браузера, создают горизонтальную полосу прокрутки (scrollbar). Поэтому внутри @media запроса начинаем переназначать предыдущие стили элементов так, чтобы вёрстка выглядела корректно — уменьшаем отступы, размер шрифта, какие-то элементы переносим или скрываем и так далее — все зависит от требований к макету.

Обратите внимание, что мы не должны переписывать все свойства элементов, а только переназначаем необходимые свойства

Если дизайнер не предоставил макеты на определенную ширину или заказчик не указал требования к адаптивной вёрстке, делаем на своё усмотрение, но соблюдая основную идею дизайна — уменьшать элементы и отступы пропорционально и переносить/скрывать блоки так, чтобы логика сохранялась

Когда вёрстка при ширине браузера 992px выглядит корректно, то устанавливаем браузеру ширину в 768px — минимальная ширина до следующего @media запроса .

Переназначаем стили в блоке @media запроса , чтобы вёрстка выглядела корректно теперь при ширине 768px

Далее устанавливаем ширину 576px и переназначаем стили в блоке

Если дизайнер/заказчик не указали минимальную ширину для адаптивной вёрстки, то устанавливаем 320px. Для этой ширины переназначаем стили элементов в блоке @media запроса

Когда вёрстка будет выглядеть корректно при всех вышеописанных размерах браузера (1200px, 992px, 768px, 576px, 320px), проверяем вёрстку плавно изменяя размер окна от большего к меньшему, чтобы убедиться что при промежуточных размерах вёрстка не ломается. При неоходимости корректируем стили элементов в том блоке @media запроса, где элементы отображаются некорректно, для этого используем инструменты разработчика (devtools) в браузере

Какой из подходов лучше?

С точки зрения производительности использование transform более эффективно, чем анимация height и max-height. При применении CSS-свойства transform элементы растризуются и перемещаются графическим процессором. Это низко затратная и простая операция для графического процессора.

Для реализации данного подхода нужно выполнить следующие действия:

Получить высоту контента, который будет располагаться на панели.
Переместить контент выше на высоту содержимого, которое будет свернуто с помощью transform: translateY(Xpx). С помощью перехода реализовать эффект открытия и закрытия панели.
С помощью JavaScript перехватить событие transitionend. После его наступления задаем display: none для контента и удаляем преобразование.

Но у данного метода есть множество недостатков. Например, при использовании transform: translateY необходимо учитывать z-index элемента.

Поэтому проще с помощью JavaScript обернуть все, что вы хотите переместить, в контейнер и переместить его. Вот пример использования данного подхода.

Применение переходов к max-height работает не так хорошо, как свойство transform. Так как браузер изменяет высоту сворачивающегося элемента на протяжении всего перехода. Эта операция потребляет много ресурсов памяти и графического процессора. Но зато данный подход проще в реализации.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Скрытие элементов

В CSS есть возможность временного или постоянного скрытия некоторых элементов веб-страницы

Стоит обратить внимание на то, что скрытые элементы не будут отображаться только на веб-странице, но их можно будет посмотреть в исходном коде HTML-документа. Для скрытия элементов используется или свойство со значением или свойство visibility со значением :

display: none; — указание браузеру скрыть элемент, убрав его из общего потока элементов. В этом случае элемент, расположенный после скрытого элемента, будет смещаться вверх, занимая место скрытого элемента.
visibility: hidden; — указание браузеру скрыть элемент, зарезервировав под него место на веб-странице. В этом случае браузер только скрывает элемент, не удаляя его из общего потока, поэтому на месте скрытого элемента останется пустое пространство, совпадающее по размеру с размером скрытого элемента.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h1.hidden { visibility: hidden; }
      h2.none { display: none; }
    </style>
  </head>
  <body>
    <h1>Это видимый заголовок</h1>
    <h1 class="hidden">Скрытый заголовок</h1>
    <h2 class="none">Скрытый заголовок2</h2>
    <p>Элемент, который скрыт с помощью свойства visibility, все равно занимает
     пространство там, где он должен находиться в отличие от элемента скрытого с помощью
     свойства display, который убран из общего потока страницы.</p>
  </body>
</html>

Попробовать »

Свойство overflow

Свойство позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – , что означает — «показывать контент, когда он выходит за границы блока».

Чтобы обрезать контент выходящий за пределы блока, вы можете установить . Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.

Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.

Удалите часть содержимого из поля ниже

Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется

В приведённом выше примере нам нужно прокручивать содержимое только по оси , однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство (en-US), которое позволяет прокручивать содержимое только по оси .

Вы также можете установить прокрутку по оси x с помощью (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства или . Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

Как и в случае со , вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.

Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство , передав два значения. Первое значение будет относиться к , а второе — к . Если передать одно значение, то и получат одинаковые значения. Например, устанавливает в и в .

Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте . Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.

В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле. Вы должны увидеть, что полосы прокрутки исчезнут.

How To Place Text in Image

Step 1) Add HTML:

Example

<div class=»container»> <img src=»img_snow_wide.jpg» alt=»Snow»
style=»width:100%;»> <div class=»bottom-left»>Bottom Left</div>
<div class=»top-left»>Top Left</div> <div class=»top-right»>Top
Right</div> <div class=»bottom-right»>Bottom Right</div>
<div class=»centered»>Centered</div></div>

Step 2) Add CSS:

Example

/* Container holding the image and the text */.container { position: relative;

text-align: center; color: white;}/* Bottom
left text */
.bottom-left { position: absolute;
bottom: 8px; left: 16px;}/* Top left text */.top-left { position:
absolute; top: 8px; left: 16px;}/* Top right text */.top-right {
position: absolute; top: 8px;
right: 16px;}/* Bottom right text */
.bottom-right { position: absolute; bottom: 8px; right: 16px;}/* Centered text
*/.centered { position:
absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);}

To learn more about how to style images, read our CSS Images tutorial.

To learn more about CSS positoning, read our CSS Position tutorial.

❮ Previous
Next ❯

visible

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

HTML

<div id="box">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget condimentum sapien. Nam in ligula molestie, laoreet neque cursus, dapibus felis. Donec ut malesuada ipsum, id euismod lacus. Quisque et mauris faucibus, sodales ligula id, volutpat dolor. Aenean id tortor lectus.
</div>

CSS

#box {
	width: 200px;
	height: 100px;
	background-color: #FD2D0F;
	overflow: visible;
}

Ширина и высота элемента div установлена на 200px и 100px. Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

Но как насчет доступности?

Хак с чекбоксом не только семантически неправильный, но и ограничивает возможности доступа к функционалу для людей с плохим зрением. При этом присваивается для чекбокса свойство display: none. Из-за этого нарушается навигация с помощью клавиатуры. Нельзя использовать скрытый чек-бокс, а использование метки не помогает. Событие нажатия клавиши пробела/ввода не перенаправляют событие в чекбокс.

Чтобы решить эту проблему, я сделал чекбокс фокусируемым, хоть и все еще невидимым.

input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

Теперь чекбокс можно выделить, но без скринридера нельзя узнать, установлен он или нет, так как невидим. Чтобы решить эту проблему, я заставил label наследовать стиль фокуса браузера по умолчанию, когда чекбокс выделен:

input:focus ~ label {
  outline: -webkit-focus-ring-color auto 5px;
}

Ниже приведена комбинированная демо-версия. Попробуйте нажать на кнопку с помощью мышки, а затем используя клавишу пробела.

Все вместе

Полная версия JavaScript-кода примера:

var containers;
function initDrawers() {
    // Получаем контейнер с контентом
    containers = document.querySelectorAll(".container");
    setHeights();
    wireUpTriggers();
    window.addEventListener("resize", setHeights);
}

window.addEventListener("load", initDrawers);

function setHeights() {
    containers.forEach(container => {
        // Получаем контент
        let content = container.querySelector(".content");
        content.removeAttribute("aria-hidden");
        // Высота контента, который нужно скрыть/показать
        let heightOfContent = content.getBoundingClientRect().height;
        // Задаем пользовательские свойства CSS с высотой контента
        container.style.setProperty("--containerHeight", `${heightOfContent}px`);
        // Когда высота считана и задана
        setTimeout(e => {
            container.classList.add("height-is-set");
            content.setAttribute("aria-hidden", "true");
        }, 0);
    });
}

function wireUpTriggers() {
    containers.forEach(container => {
        // Получаем все элементы-триггеры
        let btn = container.querySelector(".trigger");
        // Получаем контент
        let content = container.querySelector(".content");
        btn.addEventListener("click", () => {
            btn.setAttribute("aria-expanded", btn.getAttribute("aria-expanded") === "false" ? "true" : "false");
            container.setAttribute(
                "data-drawer-showing",
                container.getAttribute("data-drawer-showing") === "true" ? "false" : "true"
            );
            content.setAttribute(
                "aria-hidden",
                content.getAttribute("aria-hidden") === "true" ? "false" : "true"
            );
        });
    });
}

Вы также можете поэкспериментировать с кодом, размещенным на CodePen

Способ #2. alpha-канал

Свойство влияет на элемент целиком, но вы можете также изменять видимость отдельных свойств: цвета (), фона () или рамки (). Чтобы скрыть их, используйте цвет в формате rgba (или hsla) и установите значение альфа-канала равным нулю, например, .

See the Pen hide with color alpha by SitePoint (@SitePoint) on CodePen.

Каждое свойство можно анимировать отдельно для создания интересных эффектов.

Эту технику нельзя применить к фоновым изображения (кроме тех, которые созданы с помощью CSS-градиентов).

Способы управления альфа-каналом:

Ключевое слово . Устанавливает полную прозрачность, не поддерживает промежуточные анимации.
: красный, зеленый, синий и альфа-канал.
: оттенок, насыщенность, светлота и альфа-канал.
HEX-формат: или

Метрика	Влияние
Браузерная поддержка	Хорошая. В IE поддерживается только ключевое слово и rgba-формат.
Доступность скрытого элемента	Контент остается доступным
Вызывает изменение макета	Нет
Перерендеринг	Painting
Производительность	Хорошая, но медленнее, чем у
Покадровая анимация	Возможна
Срабатывание событий на скрытом элементе	Да