В веб-разработке часто встречаются ситуации, когда вам необходимо определить, открыт или свернут HTML-элемент. Это может быть полезно при работе со складными разделами, аккордеонами, переключателями или любыми другими элементами, которые можно разворачивать или сворачивать в зависимости от взаимодействия с пользователем. В этой статье мы рассмотрим несколько методов достижения этой функциональности на примерах кода.

Метод 1: проверка классов CSS
Один из распространенных подходов — использовать классы CSS, чтобы указать, является ли элемент открытым или свернутым. Вы можете добавить или удалить определенный класс, когда элемент развернут или свернут, а затем проверить наличие этого класса, чтобы определить его состояние.

HTML:

<div id="collapseElement" class="collapsed">...</div>
<button onclick="toggleElement()">Toggle</button>

JavaScript:

function toggleElement() {
  var element = document.getElementById("collapseElement");
  element.classList.toggle("collapsed");
}
function isOpen() {
  var element = document.getElementById("collapseElement");
  return !element.classList.contains("collapsed");
}

Метод 2: проверка атрибутов
Другой подход заключается в использовании пользовательских атрибутов для хранения состояния элемента. Вы можете добавить или удалить определенный атрибут, когда элемент развернут или свернут, а затем проверить наличие этого атрибута, чтобы определить его состояние.

HTML:

<div id="collapseElement" data-state="collapsed">...</div>
<button onclick="toggleElement()">Toggle</button>

JavaScript:

function toggleElement() {
  var element = document.getElementById("collapseElement");
  var currentState = element.getAttribute("data-state");
  element.setAttribute("data-state", currentState === "collapsed" ? "expanded" : "collapsed");
}
function isOpen() {
  var element = document.getElementById("collapseElement");
  return element.getAttribute("data-state") === "expanded";
}

Метод 3: проверка стиля
Вы также можете проверить свойства стиля элемента, чтобы определить, открыт он или свернут. Например, если высота элемента равна 0 пикселей или для свойства отображения установлено значение «нет», скорее всего, он свернут.

HTML:

<div id="collapseElement" >...</div>
<button onclick="toggleElement()">Toggle</button>

JavaScript:

function toggleElement() {
  var element = document.getElementById("collapseElement");
  element.style.display = element.style.display === "none" ? "block" : "none";
}
function isOpen() {
  var element = document.getElementById("collapseElement");
  return element.style.display !== "none";
}

Мы рассмотрели три различных метода проверки того, открыт или свернут HTML-элемент. Каждый метод имеет свои преимущества и может быть использован в зависимости от ваших конкретных требований. Внедряя эти методы, вы можете улучшить интерактивность и удобство использования ваших веб-приложений.