State on Elements
Use .data() to track the state of interactive UI elements — toggle state, expanded/collapsed, page number, etc.
jQuery
Intermediate
3 min read
Element-Level State Management
Example
$(".accordion-btn").on("click", function() {
const panel = $(this).next(".panel");
const isOpen = $(this).data("open") || false;
panel.slideToggle();
$(this).data("open", !isOpen)
.text(isOpen ? "Show more" : "Show less");
}); Pro Tip
.data() is a lightweight state store for individual elements — no global variables needed.