How to share HTML elements and their classes between pages?

luuf 0
Viewed 46

Is there an easy way to share a toggled class between different pages (linked HTML pages, for example).

I am using JavaScript so that when you click on a toggle, then it adds a class to that toggle and it collapses the toggle.

I want to keep that change on other pages where that element appears.

Is there a way to do that?

Here is my code:

const collapsibles = document.querySelectorAll(".collapsible")
collapsibles.forEach((item) =>
  item.addEventListener("click", function() {
    this.classList.toggle("collapsible--expanded");
  })
);
.collapsible {
  width: 100px;
  height: 20px;
  border: solid 2px black;
  background: yellow;
  margin: 2px;
}

.collapsible--expanded {
  height: 40px;
  background: pink;
}
<div class="collapsible">0</div>
<div class="collapsible">1</div>
<div class="collapsible">2</div>

javascript css html
1 Answers

You can paste css and js code on separate files and keep it in one directory. You can use github if you haven't.

Sarabjeet Singh0
Related