Как сделать чтобы при нажатие label открылся блок ниже по страничке

@Дмитрий0482 · Регистрация: 19.11.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте, есть блок div, который находится ниже кнопки. При нажатие на кнопку label, он появляется, если еще рас нажать, он исчезает. Как сделать из label ссылку, чтобы перекинула сразу ниже к этому блоку.

HTML5
1
2
3
4
5
6
<input class="hide" id="hd-1" type="checkbox" >
<label class="zakaz" for="hd-1" >Заказать</label>
<div class="zakaz">
<a id="zakaz"></a> 
Скрытое содержание......
</div>

css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.hide, .hide  + label  ~ div {
    display: none; 
}
 
label.zakaz {
width:150px;
height: 35px;
color:white;
font-size:20pt;
background:red;
}
 
.hide:checked  + label + div.zakaz{
 display: block; 
}

@mrtoxas · 01.04.2017, 10:34

При помощи HTML/CSS - никак.

@Дмитрий0482 · 01.04.2017, 11:54 **[ТС]**

а в js не подскажете ?

@mrtoxas · 01.04.2017, 17:53

HTML5
1
<label class="zakaz" for="hd-1" onclick="location.href='#zakaz'" >Заказать</label>

@Дмитрий0482 · 01.04.2017, 18:57 **[ТС]**

mrtoxas, не работает к сожалению.

@mrtoxas · 01.04.2017, 19:08

Повесьте событие на input

HTML5
1
2
<input class="hide" id="hd-1" type="checkbox" onclick="location.href='#zakaz'" >
<label class="zakaz" for="hd-1" >Заказать</label>

@Дмитрий0482 · 01.04.2017, 19:11 **[ТС]**

mrtoxas, да заработала большое спасибо.

@Teamur · 02.04.2017, 16:02

Дмитрий0482,
Вот ещё вариант без использования JavaScript и CSS.
Воспользоваться стандартными средствами HTML:

HTML5
1
2
3
4
<details>
  <summary>Подробнее</summary>
  <div>Содержимое</div>
</details>

А если нужно, чтобы Содержимое показывалось сразу, добавьте атрибут open:
<details open>

И всё ... )))

@mrtoxas · 02.04.2017, 16:16

Teamur, ни IE, ни Edge не понимают эти теги и summary не работает вне элемента details.

@Teamur · 02.04.2017, 16:22

mrtoxas, точно, что-то я увлекся современными технологиями! )
Но может товарищу когда-нибудь пригодится!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	01.04.2017, 10:34
	При помощи HTML/CSS - никак. 1

@Дмитрий0482 0 / -2 / 2 Регистрация: 19.11.2016 Сообщений: 153
	01.04.2017, 11:54 [ТС]
	а в js не подскажете ? 0

@Дмитрий0482 0 / -2 / 2 Регистрация: 19.11.2016 Сообщений: 153
	01.04.2017, 18:57 [ТС]
	mrtoxas, не работает к сожалению. 0

@Дмитрий0482 0 / -2 / 2 Регистрация: 19.11.2016 Сообщений: 153
	01.04.2017, 19:11 [ТС]
	mrtoxas, да заработала большое спасибо. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	02.04.2017, 16:16
	Teamur, ни IE, ни Edge не понимают эти теги и summary не работает вне элемента details. 1

@Teamur 29 / 29 / 5 Регистрация: 06.01.2015 Сообщений: 336
	02.04.2017, 16:22
	mrtoxas, точно, что-то я увлекся современными технологиями! ) Но может товарищу когда-нибудь пригодится! 0