Skip to content

Instantly share code, notes, and snippets.

@bultas
Last active March 27, 2020 13:13
Show Gist options
  • Save bultas/d1a6d846553e27c652e17dfe33d326cd to your computer and use it in GitHub Desktop.
Save bultas/d1a6d846553e27c652e17dfe33d326cd to your computer and use it in GitHub Desktop.
.content-box {
--content-box-border-color: #ccc;
border: 1px solid;
border-color: var(--content-box-border-color);
border-radius: .4rem;
}
.content-row-headline {
display: block;
padding: 1.5rem;
}
.content-row-description {
display: block;
padding: 1.5rem;
background: #fafafa;
border-top: 1px solid;
border-radius: 0 0 .4rem .4rem;
border-color: var(--content-box-border-color);
color: #757575;
}
.content-row-description.hidden {
display: none;
}
.content-row + .content-row {
border-top: 1px solid;
border-color: var(--content-box-border-color);
}
.content-box.content-box--list > .content-row {
display: grid;
margin: 0 1rem;
}
.content-box.content-box--list .content-row-headline {
padding: 1.5rem 0;
}
<div class="content-box">
<div class="content-row">
<label class="content-row-headline">
<%= radio_button(f, :test1, true, checked: true) %> True
</label>
<div class="content-row-description">
Description True
</div>
</div>
<div class="content-row">
<label class="content-row-headline">
<%= radio_button(f, :test1, false) %> False
</label>
<div class="content-row-description">
Description False
</div>
</div>
</div>
function traverse(callback) {
document.querySelectorAll(".content-row").forEach(node => {
const input = node.querySelector('input:not([type="hidden"])');
if (input) {
const description = node.querySelector(".content-row-description");
if (description) {
callback({
input,
description
});
}
}
});
}
function changeState({ input, description }) {
if (!input.checked) {
description.classList.add("hidden");
}
if (input.checked) {
description.classList.remove("hidden");
}
}
window.addEventListener("change", e => {
if (e.target.parentElement.className === "content-row-headline") {
traverse(changeState);
}
});
// FIX for Chrome Version 80.0.3987.149 (Official Build) (64-bit)
// Wait for chrome autocomplete
setTimeout(() => {
traverse(changeState);
}, 0);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment