Как вывести DIV с помощью onclick JS?

Question

[Unknown]

Привет!
Моя практическая (и теоретическая) база по JS никакая совсем. Поэтому ломаю голову как сделать элементарные по логике вещи.
Помогите начать пожалуйста...
Есть HTML:

<div class="reg_wrap">
			<p id="form_open">регистрация / вход</p>
		</div>
						<form id="form" method="post" action="" style="visibility: hidden; opacity: 0; transition: all .4s">
							<label>Ваш логин :</label>
							<input class="form_style" type="text" name="name" required oninvalid="this.setCustomValidity('Введите логин!')" oninput="setCustomValidity('')"/><br />
							<label>Ваш пароль :</label>
							<input class="form_style" type="email" name="email" required oninvalid="this.setCustomValidity('Введите пароль!')" oninput="setCustomValidity('')"/><br />
							<label><a href="#">Забыли пароль?</a></label>
							<button class="button">Войти</button>
							<label><a href="#">Зарегистрироваться</a></label>
						</form>

Как я думаю:

1. К id="form_open" подключаю событие onclick()
2. После срабатывания onclick() меняются стили для id="form" на visibility: visible и opacity: 1
3. После повторного нажатия на id="form_open" срабатывает onclick и сбрасывает стили к дефолтному состоянию.


И вот, даже не знаю с чего начать..

Comments

[Конан Варвар]

Вам нужно сделать поп-ап с формой регистрации/входа?

[Unknown]

JaredWinter: нет, не попап. Грубо говоря - на тег p повесить событие onclick и при нажатии добавлять стили для тега form которые, которые сделают видимым сам блок form

Answer 1

[Vihtori Mallat]

Inline-стили — не самая лучшая практика, вынесем в класс.
CSS-свойство visibility не анимируется, transition не сработает.

<form id="form" method="post" action="" class="form form--hidden">

.form {
  /* your styles */
}
.form--hidden {
  visibility: hidden; /* либо display: none, в зависимости от желаемого поведения */
}

document.getElementById('form_open').addEventListener('click', toggleForm);
function toggleForm() {
  document.getElementById('form').classList.toggle('form--hidden');
}

Comments

[Unknown]

правильно я понял, что здесь

document.getElementById('form').classList.toggle('form-hidden');

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

[Vihtori Mallat]

Виноват, очепятался, написал один дефис вместо двух
Здесь мы переключаем класс form--hidden, т.е. если он есть — убираем, если нет — добавляем.
Живой пример тут:
https://codepen.io/d34thkn3ll/pen/LLrBOR

[Unknown]

Спасибо, все заработало. Ошибку я заметил, классы я все равно другие ставил. Там с SASS была проблема, нужно было классы местами поменять, поэтому не работало.

Answer 2

[Конан Варвар]

Если я правильно вас понял, то вы можете это сделать via jQuery
https://jsfiddle.net/5tLr6hw5/

Можете toggle поменять на slideToggle и будет вам эффект :)

Comments

[Unknown]

да, можно на jq, но для профессионального роста нужно понимать как сделать с помощью js

[Конан Варвар]

Richswitch: jQuery и есть JS :)

[Unknown]

JaredWinter: i know

Answer 3

[Артём Ведищев]

А можно и без JS, как-то так:
https://jsfiddle.net/249hqwot/

Comments

[Vihtori Mallat]

Без JS можно сделать с использованием checkbox
https://codepen.io/d34thkn3ll/pen/pwKZaB