Как скрыть div css
Перейти к содержимому

Как скрыть div css

  • автор:

Скрыть блок div через css

Здравствуйте, есть несколько дивов, формируются через php, в итоге получается такой код:

 
Текст для показа
Текст который надо скрыть
Текст для показа
Текст который надо скрыть

Хочется, чтобы по умолчанию дивы order_item были скрыты, а при нажатии на ссылку «Текст для показа» отображались. Хочется это все сделать на css, знаю что там есть атрибут display:none , но как сделать ссылку, при нажатии которой, свойство бы менялось, а тем более когда несколько блоков, не могу понять.

Отслеживать

задан 8 фев 2018 в 7:45

21 1 1 серебряный знак 2 2 бронзовых знака

С помощью css ? Почему не JS ?

8 фев 2018 в 7:48

можно и с помощью js, но с ним я пока не дружу

8 фев 2018 в 7:52

Как Вы понимаете, в css нету обработчика нажатия на блок. По-этому, Вы вынуждены использовать js.

Скрытие элемента

Существует два варианта, чтобы скрыть элемент со страницы:

  1. Элемент полностью удаляется со страницы, другие элементы занимают его место. Скрипты не имеют доступа к его свойствам до тех пор, пока он снова не будет показан.
  2. Элемент остаётся на странице, но он не виден.

Для первого способа нужно свойству display установить значение none .

Скрытый элемент

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

Блок с белым текстом
с прозрачным текстом

В CSS есть свойство opacity , позволяющее сделать элемент прозрачным. Значением этого свойства является число от нуля до единицы.

0 — полностью прозрачный

При этом прозрачными становяться все составные части элемента, и всё содержимое.

Прозрачный блок

У блока в примере есть рамка и фон и в нём есть текст, но всё это не видно.

Есть ещё один способ скрыть элемент — спрятать его за другим блоком с позиционированием.

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

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2024 © basecourse.ru Все права защищены

JavaScript показать и скрыть элемент с текстом

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

Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.
Изменение видимости элемента достигается за счет изменения css-свойства display. Если display = ‘block’, то элемент будет видим, если ‘none’, то скрыт.

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

Вот исходный код примера, с подробным описанием:

  JavaScript показать и скрыть элемент с текстом | Дизайн студия OX2    Скрыть/Показать элемент

Тут любой текст и html код

Дизайн студия OX2 разрабатывает сайты и интернет магазины любой сложности.
По низким ценам!

При разработке любых сайтов или интернет магазинов, требуется динамически скрывать и показывать элементы. Современные сайты должны выглядеть динамично, иначе цена разработки сайта будет очень низкой, т.к. ни кто много за статичный сайт платить не будет! Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.

OX2 2014-10-05 2014-10-05

Комментарии (Написать комментарий)

Elka [02.02.2016]

Комментарий:
Огромное спасибо))

mr [02.01.2016]

Комментарий:
спосибоооооооооооооооооооооооооооооооооооооооооооооо

vbrb [21.12.2015]

Комментарий:
СПасибо!

Иван Сергеевич [16.05.2015]

Комментарий:
Спасибо, мне очень помог данный пример

Как скрыть блок в css

Каждый элемент веб-страницы обладает неким значением свойства display, назначаемым ему по умолчанию. Это может быть inline-block, block, table и так далее. Для того чтобы скрыть элемент с помощью свойства display, мы можем воспользоваться конструкцией display: none. Если элемент скрыт с помощью этой конструкции, то вместе с ним будут скрыты и все его потомки.

 Этот блок текста будет скрыт 
p  display: none; > 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *