Как сделать чтобы форма выезжала при нажатии на ссылку?

@temnymechnik · Регистрация: 27.02.2020

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 <section class="block6">
                    <div class="block6__list">
                        <h2 class="interested">Заинтересовались?</h2>
                        <p class="expected-date"> Укажите предполагаемые даты поездки,<br> и мы покажем вам лучшие предложения гостиниц в седоне</p>
                        <ul class="brown-button__list">
                            <li class="brown-button_list-button">
                                <a class="brown-button" id="toggler" href="#">Поиск гостиницы в седоне</a>
                            </li>
                        </ul>
                    </div>
                </section> 
                <section class="form">
                    <div class="form-search__js" id="myForm">
                    <form action="#" class="form-search no-js" method="post">
                        <fieldset class="form-body">
                            <p>
                                <label class="form-search-label-from" for="from">Дата заезда: </label>
                                <input class="form-search-field" id="from" name="date" placeholder="24 апреля 2017" type="text">
                                <button type="button" class="form-search-calendar">
                                    <span class="visually-hidden">Календарь</span>
                                        <svg height="22" viewbox="0 0 21 22" width="21" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M19.251 2.025h-2.845V.648c0-.381-.294-.689-.656-.689-.363 0-.656.308-.656.689v1.377h-3.938V.648c0-.381-.294-.689-.655-.689-.363 0-.657.308-.657.689v1.377H5.906V.648c0-.381-.294-.689-.656-.689-.363 0-.657.308-.657.689v1.377H1.75C.784 2.025 0 2.847 0 3.862v16.302C0 21.179.784 22 1.75 22h17.501c.966 0 1.749-.821 1.749-1.836V3.862c0-1.015-.783-1.837-1.749-1.837zm.437 18.139a.448.448 0 0 1-.437.459H1.75a.45.45 0 0 1-.438-.459V3.862a.45.45 0 0 1 .438-.459h2.844v1.378c0 .381.294.689.657.689.362 0 .656-.308.656-.689V3.403h3.938v1.378c0 .381.294.689.657.689.361 0 .655-.308.655-.689V3.403h3.938v1.378c0 .381.293.689.656.689.362 0 .656-.308.656-.689V3.403h2.845c.241 0 .437.206.437.459v16.302z" />
                                            <path d="M4.594 8.225h2.625v2.066H4.594zM4.594 11.668h2.625v2.067H4.594zM4.594 15.112h2.625v2.066H4.594zM9.188 15.112h2.625v2.066H9.188zM9.188 11.668h2.625v2.067H9.188zM9.188 8.225h2.625v2.066H9.188zM13.781 15.112h2.625v2.066h-2.625zM13.781 11.668h2.625v2.067h-2.625zM13.781 8.225h2.625v2.066h-2.625z" />
                                        </svg>
                                </button>
                            </p>
                            <p>
                                <label class="form-search-label-to" for="to">Дата выезда: </label>
                                <input class="form-search-field" id="to" name="date_exit" placeholder="4 июля 2017" type="text">
                                <button type="button" class="form-search-calendar">
                                    <span class="visually-hidden">Календарь</span>
                                        <svg height="22" viewbox="0 0 21 22" width="21" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M19.251 2.025h-2.845V.648c0-.381-.294-.689-.656-.689-.363 0-.656.308-.656.689v1.377h-3.938V.648c0-.381-.294-.689-.655-.689-.363 0-.657.308-.657.689v1.377H5.906V.648c0-.381-.294-.689-.656-.689-.363 0-.657.308-.657.689v1.377H1.75C.784 2.025 0 2.847 0 3.862v16.302C0 21.179.784 22 1.75 22h17.501c.966 0 1.749-.821 1.749-1.836V3.862c0-1.015-.783-1.837-1.749-1.837zm.437 18.139a.448.448 0 0 1-.437.459H1.75a.45.45 0 0 1-.438-.459V3.862a.45.45 0 0 1 .438-.459h2.844v1.378c0 .381.294.689.657.689.362 0 .656-.308.656-.689V3.403h3.938v1.378c0 .381.294.689.657.689.361 0 .655-.308.655-.689V3.403h3.938v1.378c0 .381.293.689.656.689.362 0 .656-.308.656-.689V3.403h2.845c.241 0 .437.206.437.459v16.302z" />
                                            <path d="M4.594 8.225h2.625v2.066H4.594zM4.594 11.668h2.625v2.067H4.594zM4.594 15.112h2.625v2.066H4.594zM9.188 15.112h2.625v2.066H9.188zM9.188 11.668h2.625v2.067H9.188zM9.188 8.225h2.625v2.066H9.188zM13.781 15.112h2.625v2.066h-2.625zM13.781 11.668h2.625v2.067h-2.625zM13.781 8.225h2.625v2.066h-2.625z" />
                                        </svg>
                                </button>
                          </p>
                          <div class="humans">
                                <p class="find-item">
                                    <button class="minus-adult" type="button">
                                    <span class="visually-hidden">Убавить</span>
                                        <svg height="12" viewbox="0 0 32 32" width="12">
                                            <path d="M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z"></path>
                                        </svg>
                                    </button>
                                    <button class="plus-adult" type="button">
                                    <span class="visually-hidden">Прибавить</span>
                                        <svg height="11" viewbox="0 0 32 32" width="11">
                                            <path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
                                        </svg>
                                    </button>
                                        <label for="adults" class="form-search-number">Взрослые:</label>
                                        <input class="input-number input-adults" name="adult" id="adults" placeholder="2" type="text"> 
                                </p>
                                <p class="find-item">
                                <button class="minus-child" type="button">
                                    <span class="visually-hidden">Убавить</span>
                                    <svg height="12" viewbox="0 0 32 32" width="12">
                                        <path d="M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z"></path>
                                    </svg>
                                </button>
                                <button class="plus-child" type="button">
                                <span class="visually-hidden">Прибавить</span>
                                <svg height="11" viewbox="0 0 32 32" width="11">
                                    <path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
                                </svg>
                                </button>
                                    <label for="children" class="form-search-number">Дети:</label>
                                    <input class="input-number input-children" name="child" id="children" placeholder="0" type="text"> 
                                </p>
                        </div>
                        <button class="search-button" type="submit"> Найти </button>
                </fieldset>
            </form>
          </div>

@fixeri · 28.02.2020, 21:54

temnymechnik,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #forma {
            transition: margin-left 0.5s ease 0s;
            margin-left: 300px;
            border: 1px solid red;
            width: 25%;
        }
 
        .hWMarg {
            margin-left: -450px !important;
        }
 
 
    </style>
</head>
<body>
    <button id="btn">go forma! CLICK ME!</button>
    <form action="#" method="post" id="forma" class="hWMarg">
        <div>
            <label for="name">Text Input:</label>
            <input type="text" name="name" id="name" value="" tabindex="1" />
        </div>
    
        <div>
            <h4>Radio Button Choice</h4>
    
            <label for="radio-choice-1">Choice 1</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
    
            <label for="radio-choice-2">Choice 2</label>
            <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
        </div>
    
        <div>
            <label for="select-choice">Select Dropdown Choice:</label>
            <select name="select-choice" id="select-choice">
                <option value="Choice 1">Choice 1</option>
                <option value="Choice 2">Choice 2</option>
                <option value="Choice 3">Choice 3</option>
            </select>
        </div>
        
        <div>
            <label for="textarea">Textarea:</label>
            <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
        </div>
        
        <div>
            <label for="checkbox">Checkbox:</label>
            <input type="checkbox" name="checkbox" id="checkbox" />
        </div>
    
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form>
 
    <script type="text/javascript">
        "use strict";
 
        document.getElementById("btn").addEventListener("click", () => {
            document.getElementById("forma").classList.toggle("hWMarg");
        });
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .