show more feature with css

Question

I am currently working on an asp.net mvc application and using css3 for all my display.

I have some text on screen and I would like to show the user a certain amount of it with the ability of clicking a link to "show more".

So I would have a div with a set height and clicking on the show more would show the rest of the content.

Can this be achieved with css exclusively?

Answer 1

You can use a checked (or radio) input to control the visibility of the adjacent div. You can also hide the input controls and manipulate the positioning of the input and the like so it appears below the content.

<div class="container">
<input id="ch" type="checkbox">
<label for="ch"></label>
<div class="text"> your actual text goes here</div>
</div>

.text {
    height: 100px;
    overflow: hidden;
}
.container {
    position: relative;
}
label {
    position: absolute;
    top: 100%;
}
input {
    display: none;
}
label:after {
    content: "Show More";
}
input:checked + label:after {
    content: "Show Less";
}
input:checked ~ div {
    height: 100%;
}

http://jsfiddle.net/ExplosionPIlls/6sj4e/

Answer 2

You'll have to play with the css for this to look right (getting show more to be on the bottom), but a solution would look something like

<a id="showmore" href="#">Show More</a>
<div id="content">lots of content</div>

CSS:

<style>
#content { height: 100px; overflow: hidden; }
a#showmore:visited + #content { height: auto; overflow: visible}
</style>