Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

hiding a button with a checkbox

September 24 (1 year ago)

Hey folks,


I have a sheet with a checkbox that can hide a section that's inside a <div></div>

That works fine.

What I'm hoping for is a way to hide a button with that same checkbox. The button is not in its own div, and it shares its place on the page with 3 other buttons that I do not want to hide.

The idea is that the GM can reveal hidden parts of the sheet to the player when their chr hits the appropriate level. I've done this for ages with the above div trick (code below) but it seems to not work on a button.


Here's the checkbox-

<input type="hidden" class="toggle-show" name="attr_continuumdeets" value="0" />

Here's the div section where it does work-

<div class="sheet-col sheet-continuum">
            <h2 class="subsection">Continuum</h2>
            ...
</div>


Here's the buttons-

<div>
    <button type="action" name="act_PersonalData" >Personal</button>
    <button type="action" name="act_Social" >Social</button>
    <button type="action" name="act_Combat" >Combat</button>
    <button class="sheet-continuum" type="action" style="display: none;" name="act_Continuum">Continuum</button>
</div>

Here's the CSS-

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="PersonalData"] ~ div.sheet-PersonalData,
.charsheet .sheet-tabstoggle[value="Social"] ~ div.sheet-Social,
.charsheet .sheet-tabstoggle[value="Combat"] ~ div.sheet-Combat,
.charsheet .sheet-tabstoggle[value="Continuum"] ~ div.sheet-Continuum
{
    display: block;
}

I wanna reveal that 4th button when the checkbox above is ticked.

Anyone know what I'm doing wrong? Nothing I try will get the button to show up when the checkbox is ticked.


Thanks

September 24 (1 year ago)

Edited September 29 (1 year ago)
GiGs
Pro
Sheet Author
API Scripter

It's hard to tell you exactly the solution without seeing your full html, because for this to work, depends on knwoledge of where the checkbox is placed in the code reletive to the button it must hide. I'll try to steer you in the right direction.

First, you need to remove this from the button:

style="display: none;" 

Inline styles have a high priority and are hard to override, so get rid of that. Intead, in your CSS put this:

button.sheet-continuum {
display: none;
}

that will set its default setting hidden.

Then to show it. probably uses something like

.charsheet .sheet-tabstoggle[value="Continuum"] ~ div button.sheet-Continuum
{
display: block;
}

You need to trace a path from the checkbox to the button. This rule suggests an arrangement like this:

checkbox
<div>
<button>
</div>

In other words, the checkbox and div containing the botton are the the same level, and the button is inside that div. Does this help?

September 24 (1 year ago)

Apologies for not providing enough info. Here's a couple of pastebins.
https://pastebin.com/FfttLT9u
https://pastebin.com/vZVNdmhH

The 2nd one is the CSS. I know it's a mess. I've been trying to get this working for ages, and I'm trying different things. Possibly some of them conflict.

September 25 (1 year ago)
GiGs
Pro
Sheet Author
API Scripter

It looks like you have two copies of that button, one still with the inline style. You might as well delete that.

The simplest solution would be to add this on line 192 of the HTML, pushing that div down one line. (yes, that means you'll have multiple copies of that line-  that's okay):

<input type="hidden" class="toggle-show" name="attr_continuumdeets" value="0" />


Then in the CSS file, put code very similar to that suggested above:

.charsheet .sheet-toggle-show[value="Continuum"] ~ div button.sheet-continuum
{
display: block;
}

See if it works now.

September 25 (1 year ago)

I'm afraid that seemed to have no effect.
Here's the updated sheets, with what I think you said.
updated HTML
https://pastebin.com/i9tXqTnT
updated CSS
https://pastebin.com/fxMxUq1j

September 25 (1 year ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

I'm a little confused by your code.

<input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="character" />
<input type="hidden" class="toggle-show" name="attr_continuumdeets" value="0" />

<div>
    <button type="action" name="act_PersonalData">Personal</button>
    <button type="action" name="act_Social">Social</button>
    <button type="action" name="act_Combat">Combat</button>
    <!--input type="hidden" class="toggle-show" name="attr_continuumdeets" value="0" /-->
    <!--button id="ContinuumButton" type="action" name="act_Continuum" >Continuum</button-->
    <!--label for="checkbox" class="toggle-button">Toggle Button</label-->
    <input type="checkbox" id="checkbox" class="sheet-switch">
    <label for="checkbox">Toggle Button</label>
    <button class="sheet-continuum" type="action" name="act_Continuum">Continuum</button>
</div>

Based on the html and css, you're trying to hide the continuum button based on the sheetTabs attribute, but the sheetTabs attribute only exists as this hidden attribute and is only set by clicking on the buttons contained in the div. There's no way to set the attribute to continuum without clicking on the button, which won't be visible unless the attribute is set to the value.

All of that said, your issue is a small typo in your CSS:

.charsheet .sheet-tabstoggle[value="Continuum"] ~ div button.sheet-Continuum
{ 
   display: block;
}

The class on your button is actually sheet-continuum, all lowercase. I'd recommend updating your html, css, and javascript so that you use a consistent casing throughout the sheet, which will help to avoid issues like this.

September 25 (1 year ago)

your confusion is entirely warranted. I'm very not good at this, and I truly appreciate the idiot-check. 

I'll do as you recommend. Thanks. :)

September 27 (1 year ago)

So nothing I've done has worked. I guess it can be done, but it's beyond me.

Thanks to everyone who has tried to help.

September 27 (1 year ago)

Edited September 28 (1 year ago)
GiGs
Pro
Sheet Author
API Scripter

I understand your frustration, but I'm sick at the moment and can't provide the amount of help I normally would. I have three things to say.

First, character sheets get corrupted, mainly when creating a new character sheet. If something doesn't work but you're sure it should work, that's a great time to assume something is corrupted. The solution is to create a new character and work on that. Have you tried this?

Second, The problem you are having is a solved problem, it has a simple solution. But we can't tell what you have tried, because you don't post informative responses to people making suggestions. What you should do now is create a new character sheet in a new campaign, with only the code you are testing. Get it working there and once that is solved, transfer it to the larger character sheet.

Thirdly, if you are still frustrated and want to give up, that's valid. Character sheets can be very frustrating. It's okay if you want to devote your time to something else.

September 27 (1 year ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

Tuck S. said:

I'm afraid that seemed to have no effect.
Here's the updated sheets, with what I think you said.
updated HTML
https://pastebin.com/i9tXqTnT
updated CSS
https://pastebin.com/fxMxUq1j

If you take your code from here.

And just do the changes I mention here:

Scott C. said:

All of that said, your issue is a small typo in your CSS:

.charsheet .sheet-tabstoggle[value="Continuum"] ~ div button.sheet-Continuum
{ 
   display: block;
}

The class on your button is actually sheet-continuum, all lowercase. I'd recommend updating your html, css, and javascript so that you use a consistent casing throughout the sheet, which will help to avoid issues like this.

It will work. You do need to have a way to enable the continuum without clicking the hidden button, but other than that, it will work.

September 28 (1 year ago)

Please forgive my frustration. I see wizards in here performing what appears like magic with code. I know it's simple for you, but for me it's a foreign language. 
I appreciate your patience with me. I'll try what you've suggested. Thanks again.