Text preview

CSS only text preview (read more)

by cahnory

HTML

<div class="textPreview">
    <input class="textPreview-state outsight" type="checkbox" id="textPreview-1" onclick="" />
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel facere quae asperiores nostrum modi dolorum sit sunt aliquid in quibusdam incidunt eveniet excepturi similique non harum. Recusandae qui nihil perspiciatis.
    </p>
   <div class="textPreview-hidden">
       <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi eum minus neque possimus aliquid consequuntur quas est voluptas distinctio aperiam ad aut velit nulla nesciunt veritatis optio fuga tempore? Temporibus!
       </p>
   </div>
    <label class="textPreview-toggle" for="textPreview-1" onclick=""></label>
</div>

CSS

.textPreview-hidden {
    display: none;
}
.textPreview-state:checked ~ .textPreview-hidden {
    display: block;
}
.textPreview-less {
    display: none;
}
.textPreview-toggle {
    cursor: pointer;
    display: block;
    font-size: .5em;
    text-align: right;
}
.textPreview-toggle:after {
    content: '\25BC';
}
.textPreview-state:checked ~ .textPreview-toggle:after {
    content: '\25B2';
}

/* Skin */
.textPreview {
    border: 1px solid #EEE;
    padding: 1em;
}

/* Not specific to the demo */
.outsight {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    position: fixed;
    width: 1px;
}

/* For this and onclick="" see: http://cahnory.fr/css/tests/checked-target2.html */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { display: block } to { display: block } }