Hidden sections checkbox problem

I need to hide a whole bunch of sections and give each one a checkbox control to reveal it.

This worked for the first one:

html:

 <input style="width:10px;" type="checkbox" class="sheet-toggle-show" />Name-of-section
<div class="sheet-body"> 
Section-to-be-hidden
</div>

CSS:

input.sheet-toggle-show:not(:checked) ~ div.sheet-body,
input.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}

However, when I come to do the same for the second section (using identical html to that shown above) the checkbox control for the second hidden section will only work if the checkbox for the first hidden section is already ticked. If the first checkbox is ticked then the second hidden section cannot be revealed.

Where have I gone wrong with this?

I don't see a name attribute in your html for the checkbox, as in:

<input style="width:10px;" type="checkbox" class="sheet-toggle-show" name="attr_name_of_section_toggle" />Name-of-section
<div class="sheet-body"> 
Section-to-be-hidden
</div>

That should make them unique from one another.

Couple of things, you'll want to give your checkbox a name, without it, it won't remember anything about its state.

As for the second thing (and your question) do all the divs have the class sheet-body? If so, that's likely the issue, because you have different checkboxes playing against the same name.

To really help, though, we'll need more than just a single div and single checkbox. We'd need to see two or three of the sections you want to hide/show and their accompanying checkboxes.

Thanks for the responses. Still stuck I;m afraid.

The giving them distinct names hasn't worked so I suspect it's the class thing.

How do I get around that? Do I need separate CSS for each one?

Something like:

input.sheet-toggle-show:not(:checked) ~ div.sheet-body1,
input.sheet-toggle-hide:checked ~ div.sheet-body1 {
    display: none;
}

input.sheet-toggle-show:not(:checked) ~ div.sheet-body2,
input.sheet-toggle-hide:checked ~ div.sheet-body2 {
    display: none;
}

etc.

That would be a pain - I have a lot of sections to do this way!

Hmm, Finderski is more knowledgeable than I am on all things character sheets, but all my show/hide sheet sections (different sections of notes, inventory, skills, etc.) all work off of one bit of css:

/* sheet arrows */
input.sheet-arrow {
    float: left;
}
.sheet-body{
    display: none;
}
input.sheet-arrow:checked ~ .sheet-body {
    display: block;
}

As you can see, all of them use body as the class.

This is condensed html from my Heroes Unlimited journal section:

<!-- Journal Tab -->
<div class='sheet-journal'>
    <h2>Journal</h2>
    <div class="note-one-panel">
        <input type="checkbox" name="attr_notes-toggle" class="sheet-arrow" />
        <h4>Notes</h4>
        <div class='body'>
            first not stuff here
        </div>
    </div>
    <div class="note-two-panel">
        <input type="checkbox" name="attr_notes_2-toggle" class="sheet-arrow" />
        <h4>Notes 2</h4>
        <div class='body'>
            second note stuff here
        </div>
    </div>
    <div class="note-three-panel">
        <input type="checkbox" name="attr_notes_3-toggle" class="sheet-arrow" />
        <h4>Notes 3</h4>
        <div class='body'>
            third note stuff here
        </div>
    </div>
</div>

After putting all that in my post, I looked back at your first post...  The html sandbox that sheets run in introduces a sheet- prefix that you need to use in the css.  You have it in your html as well, so if you use class="sheet-body", your css might very well need to be .sheet-sheet-body.

Rich K, we need to see more of the HTML and CSS code...like 3 or 4 checkboxes and the associated sections they should impact. You may have to change names of classes depending on how you want to do it. There are ways to avoid that, just depends.

Kraynic's stuff works, because each input is separated from the others by being inside their own containers. So, his CSS works, because each checkbox has its own name (therefore it's own value) and the class inside one container (div) can't impact stuff in the other containers.

For what you're wanting to do, will either need to change class names, change the structure of your sheet, or possibly add "hidden" checkboxes that are duplicates of the ones your users can interact with...doing that would allow you to change your ~ to a +. You still need to name each checkbox different from the others. That third option only works if each checkbox only impacts one section. If multiple checkboxes can impact a section, then that third option I just mentioned won't work.

But to better help, we really need to see more code than just a single snippet like that.

Thanks for the help both.

Managed to make it work as follows:

 <div class="sheet-columns">
  <div>
      <input style="width:10px;" type="checkbox" class="sheet-toggle-show" />
      <span>SECTION-1 NAME</span>
      <div class="sheet-body">    
          SECTION-1 DETAILS    
      </div>
   </div>
</div>
  <div>
      <input style="width:10px;" type="checkbox" class="sheet-toggle-show" />
      <span>SECTION-2 NAME</span>
      <div class="sheet-body">    
          SECTION-2 DETAILS    
      </div>
   </div>
</div>
 <div class="sheet-columns">

.sheet-columns {
  display: flex;
  justify-content: space-between;
}
.sheet-columns > * {
  flex: 2;
}
input.sheet-toggle-show:not(:checked) ~ div.sheet-body,
input.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}

If I may hijack this question slightly...

I want to have a checkbox at the top of the sheet that affects A LOT of different sections further down into the code.

But this doesn't seem to work if the checkbox and affected sections aren't right next to each other in the code.

So this works:

<input type="hidden" name="attr_toggle" .... >
<input type="checkbox" name="attr_toggle" .... >

<div class="affected-section">
     Stuff to be hidden
</div>

But this doesn't:

<input type="hidden" name="attr_toggle" .... >
<input type="checkbox" name="attr_toggle" .... >

<div class="other-stuff">
     <div class="affected-section">
          Stuff to be hidden
     </div>
</div>

Is there a way to make this work?

You don't need the hidden input one right next to the visible checkbox, the hidden is one the one you sprinkle throughout your code something like:

<input type="checkbox" name="attr_toggle" .... >
<div class="affected-section">
	Stuff to be shown/hidden
</div>
<div class="other-stuff">
     <input type="hidden" name="attr_toggle" .... >
     <div class="affected-section">
          Stuff to be hidden
     </div>
</div>

I assumed it would be something like that and so I tried that and it still doesn't work! It works just fine when right next to each other but as soon as I put the section inside something else (hidden input included right next to it) it simply stops working. I can see in the inspector that the hidden input's value is changed but it has no effect on the section right below it.

Lova said:

(hidden input included right next to it) it simply stops working.

The input must be just before the element, placing it after won't do.

We'll need to see the CSS.  If you are using a '+' instead of a '~' that would account for it. + means it needs to be right next to it, the ~ means it just needs to be a the same "level."

More specifically...
This works:

<input type="checkbox" name="attr_tab" class="sheet-tab sheet-tab-small" value="1">
<span class="sheet-tab sheet-tab-small">Show tab</span>

<div class="sheet-hiddentab">
    <div class="sheet-row">
        This can be toggled hidden.
    </div>
</div>

This does not:

<input type="checkbox" name="attr_tab" class="sheet-tab sheet-tab-small" value="1">
<span class="sheet-tab sheet-tab-small">Show tab</span>


<div class="sheet-row">
    <input type="hidden" name="attr_tab">
    <div class="sheet-hiddentab">
        This can't be toggled hidden.
    </div>
</div>

Css:

input.sheet-tab:checked ~ div.sheet-hiddentab {
    display: none;
}

Does it matter what "sheet-row" is defined as in css? Could that mess with it somehow?

Okay, so I finally figured out how to do it on my own.
If the checkbox is on the same level as the section being hidden this works fine:

HTML:

<input type="checkbox" name="attr_tab" class="sheet-tab sheet-tab-small">
<span class="sheet-tab sheet-tab-small">Show tab</span>

<div class="sheet-hiddentab">
    <div class="sheet-row">
        This can be toggled hidden.
    </div>
</div>

CSS:

input.sheet-tab:checked ~ div.sheet-hiddentab {
    display: none;
}

BUT if you want to use a hidden value and sprinkle it around that CSS won't work. It's listening for a checked checkbox and nothing else.

If you want to sprinkle in a hidden value to hide sections in different places you have to do it like this:

HTML:

<input type="checkbox" name="attr_tab" class="sheet-tab sheet-tab-small" value="1">
<span class="sheet-tab sheet-tab-small">Show tab</span>


<div class="sheet-row">
    <input type="hidden" name="attr_tab" class="sheet-locktoggle">
    <div class="sheet-hiddentab">
        This can be toggled hidden.
    </div>
</div>

CSS:

input.sheet-locktoggle:not([value='1']) ~  div.sheet-hiddentab {
    display: none;
}

Here it's listening specifically for the value of the hidden input, because of its class.

So the only thing the checkbox does here is change the value of the hidden input which in turn changes the style of another class.