I have been fudging with this for a few days. I cannot figure out what I am doing wrong. I need to hide the Weapon Notes. <div class="toggle-container">
<input type="hidden" class="toggle" name="attr_show_flag" value="1" />
<button type="action" name="act_show" class="toggle">
<span style="font-family:'Pictos'" class="checked">{</span>
<span style="font-family:'Pictos'" class="notchecked">}</span>
</button>
</div>
<div class="weapondate">Weapon Data Goes Here</div>
<!-- Hide this div when not checked -->
<div class="weaponnotes">Weapon Notes Go Here</div>
<script type="text/worker">
// Register the click handler to all specified buttons.
const toggleList = ["show"];
toggleList.forEach(function(button) {
on(`clicked:${button}`, function() {
const flag = `${button}_flag`;
// Check the current value of the hidden flag.
getAttrs([flag], function(v) {
// Update the value of the hidden flag to "1" for checked or "0" for unchecked.
setAttrs({
[flag]: v[flag] !== "1" ? "1" : "0"
});
});
});
});
</script> /* Configure the button styling. This example makes it look like a checkbox. */
button.sheet-toggle {
padding: 0;
cursor: pointer;
width: 16px;
height: 16px;
text-shadow: 0 0 10px #FF6B48, 2px 2px 2px rgba(255,107,72,0);
color: #FC1212;
border: 2px ridge #77787b;
background-color: black;
box-shadow: inset 2px 1px 2px rgba(255, 255, 255, 0.075);
font-family: "Pictos"
font-size: 18px;
}
/* Hide the "checked" section of the toggle if the attribute value is not "1". */
input.sheet-toggle:not([value="1"]) ~ button.sheet-toggle > span.sheet-checked {
display: none;
}
input.sheet-toggle:not([value="0"]) ~ button.sheet-toggle > span.sheet-notchecked {
display: none;
}
input.sheet-toggle:not(:checked) ~ div.sheet-weaponnotes {
display: none;
}
.sheet-toggle-container {
float:left;
}
.sheet-weapondata {
float:left;
}
