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

Question

Есть определенный параграф, который выводится на странице. Я сделал, чтобы по клику менялось его содержание. А как вернуть по второму клику дефолтное состояние элемента? Ну, вроде того, что есть блок со скрытым содержимым. Например: спойлер. Пользователь может пролистать. Или щелкнуть, чтобы открылось. а по второму клику, чтобы опять закрылось.

firstParagraph.addEventListener('click', function () {
    firstParagraph.innerHTML = 'Это первый абзац!';
    firstParagraph.style.textAlign = 'center';
})

Answer 1

Если говорить про параграф, то всё легко, просто сохраняем текущий текст в переменную.

let p_text = p.textContent
let bool = false

p.addEventListener('click', () => {
  p.textContent = bool ? p_text : 'Какой-то другой текст!'
  bool = !bool
})

<p id="p">Какой-то текст!</p>

Если про спойлер говорить, то можно обойдись стилями.

#l {
  background: rgb(19, 19, 19);
  color: transparent;
  border-radius: 5px;
  user-select: none;
  padding: .5rem;
}

#check:checked + #l {
  color: rgb(255, 255, 255);
}

<input type="checkbox" id="check" style="display: none;">
<label id="l" for="check">Какой-то текст!</label>

Answer 2

Похоже, что как-то так, проверяем состояние.

Если первое состояние - задаем второе. Если нет - то записываем первое состояние.

const firstParagraph = document.getElementById('first');

firstParagraph.addEventListener('click', function() {
  if (firstParagraph.innerHTML === 'Это первый абзац!') {
    firstParagraph.innerHTML = 'Это второй абзац!';
    firstParagraph.style.textAlign = 'left';
  } else {
    firstParagraph.innerHTML = 'Это первый абзац!';
    firstParagraph.style.textAlign = 'center';
  }
})

#first {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  text-align: center;
}

<div id="first">
  Это первый абзац!</div>

Answer 3

Можно просто добавлять или удалять класс, чтобы прменять нужные стили:

document.querySelector('.paragraph').addEventListener('click', (e) => {
  e.target.classList.toggle('collapsed');
});

body {
  background-color: #777;
}

.paragraph {
  border: 1px solid black;
  width: 128px;
}

.paragraph.collapsed {
  height: 2px;
  overflow: auto;
}

<p class="paragraph collapsed">Text 1</p>

БЛОГ НА HUSL

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

Ответы (3 шт):