<h1>Testing display: contents</h1>
<button type="button">Toggle display: contents</button>
<div class="container">
  <div class="nested-div">A direct child div</div>
  <ul>
    <li>One List Item</li>
    <li>A Second List Item</li>
  </ul>
</div>

body {
  background-color: #483D3F;
  color: #F4EBD9;
  font-family: sans-serif;
}

button {
  background-color: #F4EBD9;
  border: 1px solid #A39A92;
  color: #483D3F;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* general ul styles */
ul {
  list-style-type: none;
}

ul li {
  margin-left: 2rem;
}

.container {
  border: solid 3px #A39A92;
  padding: 1rem;
  display: flex;
}

.container + h2 {
  margin-top: 5rem;
}

ul.list-with-display-contents {
  display: contents;
}

const ul = document.querySelector(".container ul");
const button = document.querySelector("button");

button.addEventListener("click", () => {
  currentStyle = ul.style.display;
  if (currentStyle) {
    ul.style.display = "";
  } else {
    ul.style.display = "contents";
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.