Search code examples
csscheckboxshow-hide

Defaulting Show/Hide to Hide with pure CSS using checkbox

I am looking to have the 'item value appears here' to be hidden by default on landing on the page or refreshing. I am using a checkbox with a label to be used as the show/hide click. This appears in 3 columns and currently clicking 'show' on the left column makes all 3 item values appear (this is not a problem and as I do not wish to use JavaScript, happy with this, although if clicking on one only unhides one value with css then I'm all ears!).

I am not able to use JavaScript and feel there must be a way to do this with CSS using checkboxes - any help will be greatly appreciated!

 <div class="key-items-wrapper">
       <div class="left-column">
               <img src="/images/item.png"> 
                    <div class="center-column-text">
                         <p>item name</p>
                           <div class="content">
                                 <p>item value appears here</p>                            
                                </div>                        
                                    <input id="checkbox-privacymode" type="checkbox"> 
                                    <label for="checkbox-privacymode"></label>
                        </div>
                </div>

This is the code for the checkbox

 #checkbox-privacymode {
    display: none;
    visibility:hidden;
}

#checkbox-privacymode + label {
    display: block;
    padding-right: 52px;
    height: 35px;
    background: transparent url(/images/eye-hidden.png) no-repeat scroll right center;
    float: right;
    font-size: 0.9em;
    color: #777;
    cursor: pointer;
}

#checkbox-privacymode + label::before {
    content: 'hide';
}

#checkbox-privacymode:checked + label {
    background-image: url(/images/eye.png);
    display:block;
}

#checkbox-privacymode:checked + label::before {
    content: 'show';
}

Many Thanks

Solution

    1. Change
      <input id="checkbox-privacymode" type="checkbox">
      to
      <input id="checkbox-privacymode" type="checkbox">

    2. You will need to reposition your HTML elements so that the message is immediately after the checkbox.

    3. Once the message is correctly positioned in the HTML code, in CSS you can select the message like this:

    #checkbox-privacymode:checked + p {
   display: none;
}