Проблемы с тегом легенды, когда я показываю и повторно скрываю его в наборе полей. ⇐ Jquery

[Anonymous]

Я пытаюсь сделать так, чтобы тег легенды отображался при нажатии на поле ввода. Идея заключается в том, что поле ввода сначала находится внутри набора полей, а легенда - как скрытый класс. Если поле ввода находится в фокусе или щелкнуто, скрытый класс будет удален и будет выглядеть следующим образом:


Я также добавил часть, в которой, если оставить пустым, тег легенды исчезнет, ​​повторно добавив удаленный

Код: Выделить всё

hidden класс.  Однако при этом остаются неудобные пробелы там, где раньше было так:
[img]https://i.sstatic.net/VMjqf.png[/img]

Я сделал что-то не так? Что мне нужно сделать в первую очередь?
Код находится здесь:


$(function() {
$(".next").click(function() {
var div = $(this).closest('.wrapper');
var next = $(this).closest('.wrapper').next();
div.addClass('hidden');
next.removeClass('hidden');
})
})

$(function() {
$('input').click(function() {
$('input').each(function(index) {
const legend = $(this).closest('fieldset').children('legend');
if (($(this).val() == "" || $(this).val() == " ") &&  $(this).is(":focus") == false) {
if (legend.hasClass('hidden') == false) {
legend.addClass('hidden');
$(this).css("margin-top", "10px");
}
} else {
legend.removeClass('hidden');
$(this).css("margin-top", "-150%");
}
})
})
})

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');
html {
font-family: "Poppins", sans-serif;
margin: 0px;
padding: 0px;
background: #EDE9E8;
}

.cover {
width: 100%;
height: 100%;
position: absolute;
}

form {
/*border: 3px solid red;/**/
width: 57%;
height: 100%;
margin: 0 auto;
}

.child {
width: 50%;
}

.wrapper {
background: white;
width: 95%;
height: 65%;
padding: 3%;
margin-top: 8%;
border-radius: 50px;
display: flex;
}

.border_none {
border: none;
}

.border_black {
border: 2px solid black;
}

.with_image {
text-align: center;
margin-top: 15%;
}

.with_image img {
width: 40%;
}

.input_box {
height: 40px;
width: 70%;
}

.wrapper h1 {
margin-top: 10%;
}

.wrapper label {
font-size: 150%;
}

legend {
font-size: 12px;
/*border: 2px solid black;/**/
}

.wrapper fieldset input[type="text"],
.wrapper fieldset input[type="email"],
.wrapper input[type="password"],
input[type="number"] {
width: 100 %;
height: 100 %;
margin - top: 10 px;
border: none;
/**/
}

.wrapper fieldset input[type="text"]: focus,
.wrapper input[type="email"]: focus,
.wrapper input[type="password"]: focus,
input[type="number"]: focus {
outline: none;
}

.child fieldset {
overflow: hidden;
border - radius: 20 px;
}

.wrapper select {
margin - left: 14 %;
height: 40 px;
}

.wrapper.next {
background: #2c54db;
width: 15%;
height: 8%;
border: white;
color: white;
float: right;
border-radius: 40px;
font-weight: bold;
}

.hidden {
display:  none;
}

Код: Выделить всё

Identity

First Name




Last Name



Civil Status

Single
Married
Widowed
Anulled



Email


Next


[img]../images/registration/user_folder_125px.png[/img]




Password

Password




Confirm Password



Next

Подробнее здесь: https://stackoverflow.com/questions/671 ... a-fieldset