0

Есть такой код:

<div id="block1" class="hide-theblock" style="display: none">
</div>
<a class="btn-open-form" style="margin-left: 90px;" onclick="document.getElementById('block1').style.display=''">Открыть форму</a>


<div id="block2" class="hide-theblock" style="display: none">
</div>
<a class="btn-open-form" style="margin-left: 450px;" onclick="document.getElementById('block2').style.display=''">Открыть форму</a>


<div id="block3" class="hide-theblock" style="display: none">
</div>
<a class="btn-open-form" style="margin-left: 800px;" onclick="document.getElementById('block3').style.display=''">Открыть форму</a>

Как сделать, чтобы после открытия 1 блока при нажатии на кнопку 2, чтоб 1 закрылся, а 2 открылся и соответственно при нажатии на любой другой, чтобы открытый закрывался

Поясняю картинками, первая картинка (при нажатии на кнопку 1 открылся 1-ый блок), 2 картинка (при нажатии на кнопку 2, открылся 2-ой блок а 1-ый закрылся): введите сюда описание изображения

введите сюда описание изображения

Вот здесь то самое что я хочу получить в итоге: ссылка на пример

2

2 ответа 2

6

Если не хотите использовать JS, можно так сделать:

.container {
  display: flex; /* Важно */
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 96vh;
}

.box {
  background: #444;
  flex: 1; /* Важно */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  outline: none;
}

.box span {
  font-size: 3rem;
  display: block;
  text-align: center;
  color: #fff;
}

.box:focus { /* Важно */
  flex: 1 1 50%; /* Важно */
}
.box:focus-within {
  background: #000; /* Оформление активного элемента. IE и Edge за бортом */
}
<div class="container">
  <div tabindex="0" class="box">
    <span>01</span>
  </div>
  <div tabindex="0" class="box">
    <span>02</span>
  </div>
  <div tabindex="0" class="box">
    <span>03</span>
  </div>
</div>

3
  • 1
    Стоит ещё .box:focus-within приделать - на случай, если внутри есть интерактивные элементы. Правда IE/Edge идут лесом...
    – Qwertiy
    Commented 14 мар. 2019 в 22:19
  • @Qwertiy дельное предложение) Commented 15 мар. 2019 в 8:15
  • не совсем то, а точнее совсем не то(( добавил еще пояснение картинками, как должно выглядеть Commented 16 мар. 2019 в 4:59
5

class myClass {
  constructor(node) {
    this.node = node;

    if (!this.node) return;

    this.onMyFunction = this.onMyFunction.bind(this);

    this.container = this.node.querySelector(".container");
    this.container.addEventListener("click", this.onMyFunction, false);
  }

  onMyFunction(event) {
    const item = event.target.closest(".item");

    if (!item) return;

    this.unsetActiveItems();
    this.myFunction2(item);
  }

  myFunction2(element) {
    element.classList.add("active");
  }

  unsetActiveItems() {
    [...this.node.querySelectorAll('.item')].forEach(node => node.classList.remove('active'));
  }
}

new myClass(document.querySelector(".myContainer"));
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.item {
  width: 100px;
  height: 300px;
  margin: 10px;
  transition: width .5s ease-in-out;
}

.item.active {
  width: 300px;
}

.item:first-child {
  background-color: red;
}

.item:nth-child(2) {
  background-color: yellow;
}

.item:last-child {
  background-color: green;
}
<div class="myContainer">
  <div class="container">
    <div class="item"></div>
    <div class="item active"></div>
    <div class="item"></div>
  </div>
</div>

Ну или чуть проще:

[...document.querySelectorAll(".item")].forEach(item => {
  item.addEventListener("click", (event) => {
    [...document.querySelectorAll(".item")].forEach(item => item.classList.remove("active"));
    event.target.classList.add("active");
  });
});
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}

.item {
  width: 100px;
  height: 300px;
  margin: 10px;
  transition: width .5s ease-in-out;
}

.item.active {
  width: 300px;
}

.item:first-child {
  background-color: red;
}

.item:nth-child(2) {
  background-color: yellow;
}

.item:last-child {
  background-color: green;
}
<div class="container">
  <div class="item"></div>
  <div class="item active"></div>
  <div class="item"></div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.