Announcement

Collapse
No announcement yet.

CSS "Checkbox Hack"

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS "Checkbox Hack"

    Hello, below is a pretty basic CSS expander, using the "checkbox hack"

    Code:
    <style type="text/css">
    .answer {max-height:0px; overflow:hidden; transition:.4s;}
    .question[type=checkbox]:checked ~ div {max-height:1000px;}
    </style>
    
    <div>
    <input class="question" type="checkbox">question?
    <div class="answer">
    answer; a thing said, written, or done to deal with or as a reaction to a question, statement, or situation.
    </div></div>
    Normally when I use this trick, I hide the checkbox, and trigger it from elsewhere on the page with java script. However, today, I was trying to use the actual checkbox, which was fine, until I tried to style it. I warped a label tag around it, and it broke the script.

    Code:
     <label><input class="question" type="checkbox">question? </label>
    Which makes sense. But is there a way to make this work, without having to have the checkbox, directly connected to the div?

    Thank you for your thoughts,

    Nick

  • #2
    Hi there nickdclements,

    does this help...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    body {
        background-color: #f0f0f0;
        font: 1em/150% verdana, arial, helvetica, sans-serif;
     }
    
    #cb0 {
        position: absolute;
        left: -999em;
     }
    
    #cb0:checked~#some-content label::before {
        content:'hide content';
     }
    
    #cb0:checked ~ #some-content #hidden-content  {
        max-height: 100%;  
        box-shadow: 0.4em 0.4em 0.4em #999;
     }
    
    #some-content label {
        display: inline-block;
        margin-bottom: 0.5em;  
        cursor: pointer;  
     }
    
    #some-content label::before {
        content:'show content';   
     }
    
    #hidden-content {
        width: 50%;
        max-height: 0;
        margin: auto;
        border-radius: 1em;
        overflow: hidden;
        box-shadow: 0 0 0 #999;
        transition: all  0.4s ease-in-out;
     }
    
    #hidden-content p {
        padding: 1em;
        margin: 0;
        border: 0.1em solid #000;
        border-radius: 1em;
        background-color: #fff;
    
     }
    </style>
    
    </head>
    <body>
    
    <input id="cb0" type="checkbox">
    
    <div id="some-content">
     <label for="cb0"></label>
      <div id="hidden-content">
       <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
        bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
        posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
        Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
        sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
        nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
        odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
        Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
        purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
       </p>
      <!-- #hidden-content --></div>
    <!-- #some-content --></div>
    
    </body>
    </html>
    


    ~ the original bald headed old fart ~

    Comment

    Working...
    X