X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Скрыть закрыть блок
sergei_burg
sergei_burg
Topic Starter сообщение 1.2.2020, 11:48; Ответить: sergei_burg
Сообщение #1


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

[CSS]
/* demo контейнер */
.demo {
padding: 0 0px;
margin: 40px 40px 0px;
font-family: Courier New;
}
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
display: none;
}
/* вид текста label */
.hide + label {
margin: 0;
padding: 0;
color: black;
cursor: pointer;
display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
color: gray;
border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием */
.hide:checked + label + div {
display: block;

margin-left: 20px;
padding: 10px;
/* чуточку анимации при появлении */
-webkit-animation:fade ease-in 0.5s;
-moz-animation:fade ease-in 0.5s;
animation:fade ease-in 0.5s;
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 1 }
}
.hide + label:before {
background-color: white;
color: #bcbcbc;
content: "\f107";
display: block;
float: left;
font-size: 14px;
font-weight: 900;
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
height: 16px;
line-height: 16px;
margin: 2px 0px;
text-align: center;
width: 16px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.hide:checked + label:before {
content: "\f106";
}
[/CSS]

<div class="demo">
<input class="hide" id="hd-1" type="checkbox">
<label for="hd-1">открыть закрыть</label>
<div>
какой то блок
</div>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 5.3.2020, 11:29; Ответить: Degradator
Сообщение #2


Делай при помощи js. На html с css это можно сделать, но это извращение, и разбираться в твоем коде совершенно не хочется.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как скрыть блок в приложении на Android
0 Вито_052 655 15.12.2019, 12:37
автор: Вито_052
Открытая тема (нет новых ответов) Появляющийся блок
0 sergei_burg 1672 1.6.2019, 13:39
автор: -sergei1980-
Открытая тема (нет новых ответов) Перенести блок FAQ с сайта
Верстка
3 Gera 1823 13.12.2018, 15:40
автор: mmkulikov
Открытая тема (нет новых ответов) спойлер, как сделать кнопку "скрыть"?
4 aleksmscw 13085 15.1.2018, 11:43
автор: -Degradator-
Открытая тема (нет новых ответов) Куплю места на мордочках, под сквозные ссылочки под блок сквозных ссылок.
тематика: СМИ,Туризм,Медицина
4 SeoGanik 2498 18.2.2017, 12:33
автор: SeoGanik


 



RSS Текстовая версия Сейчас: 8.5.2021, 15:19
Дизайн