<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";
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.