0

I'm looking for a pure way to make the checkbox hide/show the contents of the <div class="chapter"> block: 

<div>
    <input id="_1" type="checkbox">
    <h2>
    <label for="_1">Collapse 1</label>
    </h2>
</div>
<div class="chapter">
    Content 1
</div>

<div>
    <input id="_2" type="checkbox">
    <h2>
    <label for="_2">Collapse 2</label>
    </h2>
</div>
<div class="chapter">
    Content 2
</div>

My current attempt (tl;dr: scroll to the bottom): 

/* Niceties */

*:focus{
    outline: none;
}

label {
    cursor : pointer;
    display: block;      
}


/* Checkboxes are hidden, and replaced with a right/down pointing 
   arrow, depending on selection state. Note that I want this 
   arrow to be placed *before* the h2 */

div > input { 
    display           : inline-block; 
    -webkit-appearance: none; 
    -o-appearance     : none; 
    -moz-appearance   : none;  
}

div > input:before { 
    content: "\25b6  ";     /* right-pointing arrow */ 
    display: inline-block;      
}

div > input:checked:before { 
    content: "\25bc  ";     /* down-pointing arrow */
    display: inline-block; 
}

/* And here's the problem: how to make the checkbox affect the div 
   after the checkbox' parent div? */

/* (show) */
input + h2 + div.chapter {   /* this obviously does not work */
    display: none; 
}

/* (hide) */
(div + input:checked) + div.chapter {  
    /* this selector is pseudo-code of what I really need, but 
       how to accomplish this kind of grouping? */
    display: block;  
}

The accepted answer to this question changes the structure of the HTML by placing the element-to-be-affected into the <input>'s surrounding <div>. I would like my <div> structure to stay intact, because I need it to style the <h2>.

Note that I explicitly didn't use the or tags, I'm wondering if there's a pure CSS solution here that I'm not seeing (or even aware of).

Community
  • 1
  • 1
Rody Oldenhuis
  • 36,880
  • 7
  • 47
  • 94
  • 3
    If you don’t want to change the HTML structure _at all_, then this is basically another duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/q/1014861/1427878), and the answer is No, not possible. But you only need the checkboxes to be on the same level as the .chapter element - so you _can_ change the code, just leave the h2 and labels where they are. (Sorry, strike that last bit - I see you still want to apply formatting to the checkboxes themselves, and don’t have them hidden.) – CBroe Jan 20 '17 at 13:37
  • Not gonna happen. – Serg Chernata Jan 20 '17 at 13:38
  • @CBroe no, the `` are to be rendered as arrows preceding the `

    `.

     – Rody Oldenhuis Jan 20 '17 at 13:39
  • Then put the inputs at the very top, even before the first div - then you can still style the H2 inside the div depending on whether the checkbox is checked or not. – CBroe Jan 20 '17 at 13:40
  • @CBroe hmmm there's an thought ...fiddling – Rody Oldenhuis Jan 20 '17 at 13:40
  • FYI: `input:before` is something you should not use anyway, because that is not supported in all browsers. (Per definition, pseudo elements are to be rendered as if an actual child element was inserted into the element - but inputs can’t have children.) – CBroe Jan 20 '17 at 13:41
  • But, I'm not looking to select the input's parent div, I'm looking to select the div following its parent. So, not an exact duplicate I'd say... – Rody Oldenhuis Jan 20 '17 at 13:41
  • 2
    You can't "look back" on a parent in CSS, to interact with their siblings. Elements don't know their aunts and uncles. – antesoles Jan 20 '17 at 13:42
  • 2
    _“But, I'm not looking to select the input's parent div, I'm looking to select the div following its parent”_ – Yes, but to base that on the input’s status you would have to _go up_ to the input’s parent element first, so that you can then select the sibling of that parent. – CBroe Jan 20 '17 at 13:42
  • 1
    @antesoles well, shit. – Rody Oldenhuis Jan 20 '17 at 13:42
  • 1
    [This](http://codepen.io/dibdab/pen/vgxjZz) is best I could do. But that was with moving elements around, because like has being said it is impossible for CSS to do this while maintaining the structure you have. – Callum Jan 20 '17 at 13:47
  • @RodyOldenhuis: You want help closing this question? Are you agreeing with the dupe target? If yes, I can help. – Harry Jan 20 '17 at 14:18
  • @Harry well, parents or uncles, I think it's close enough :) – Rody Oldenhuis Jan 20 '17 at 14:20
  • 1
    Ah, its already closed anyway @RodyOldenhuis. But its nice to see OPs accepting that their question is atleast a close enough duplicate. I should've expected that from an experienced user like you though :) – Harry Jan 20 '17 at 14:22

0 Answers0