Как поменять блоки местами при нажатии на кнопку

Question

Как поменять блоки местами при нажатии на кнопку

Рейтинг: 0Ответов: 0Опубликовано: 25.01.2023

Есть два дочерных блока, которые находятся в родительском блоке. Сами по себе они имеют одинаковый размер. Подскажите как реализовать, чтобы при нажатии на кнопку, они менялись местами, то-есть левый блок уходил в правую сторону, а правый в левую... но при этом содержимое блока менялось! То-есть текст в левом блоке, при перемещении его в правый блок заменялся с "нажмите если хотите зарегистрироваться" на "нажмите если хотите войти" и сама кнопка вместо "Регистрация" на "Войти", ну и соответственно формы в правом блоке.. При перемещении в левый блок, вместо трёх форм сделать 2 формы, ну и название изменилось на нужные мне (Логин и Пароль)

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
}

.login-registr {
  display: flex;
  flex-direction: row;
  width: 1000px;
  height: 500px;
  background-color: yellow;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 500px;
  height: 500px;
  background-color: aquamarine;
  transition: all 0.5s ease;
}

.registr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
  width: 500px;
  height: auto;
  background-color: khaki;
  transition: all 0.5s ease;
}

.button-log-reg {
  width: 100px;
  height: 30px;
  text-align: center;
  color: antiquewhite;
  background-color: black;
  cursor: pointer;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

<div class="login-registr">
  <div class="login">
    нажмите если хотите зарегистрироваться
    <div class="button-log-reg">Регистрация</div>
  </div>
  <div class="registr">
    <div>
      <form action="/action_page.php">
        <label for="fname">Имя</label>
        <input type="text" id="fname" name="firstname" placeholder="Ваше Имя..">

        <label for="lname">Фамилия</label>
        <input type="text" id="lname" name="lastname" placeholder="Ваша Фамилия..">

        <label for="country">Страна</label>
        <select id="country" name="country">
          <option value="australia">Австралия</option>
          <option value="canada">Канада</option>
          <option value="usa">США</option>
        </select>

        <input type="submit" value="ОТПРАВИТЬ">
      </form>
    </div>
  </div>
</div>

css javascript html jquery

Источник: Stack Overflow на русском

Как поменять блоки местами при нажатии на кнопку

Ответы