Expandable paragraphs with HTML and CSS - html

Question

I was wondering if anyone here would be as so kind as to help me out a bit. I am looking to make expandable paragraphs for my client's website. They would like to keep all of the content from their site, which is pretty massive, and they want a total overhaul of the design. They mainly wan tot keep it for SEO purposes. Anyhow, I thought it would be helpful for the both of use if there is some way to use expandable paragraphs, you know, with a "read more..." link after a certain line of text.
I know that there are some JQuery and Java solutions for this, but we really would like to stay away from those options, if at all possible. When would like HTML and CSS, if we can.
Here is kind of an example:
HEADING HERE
Paragraph with a bunch of text. I would like this to appear in a pre-determined line. For example, maybe the start of the paragraph goes on for, let's say, three lines and then we have the [read more...]
When the visitor clicks "read more", we would like the rest of the content to just expand to reveal the article in its entirety. I would like for the content to already be on the page, so it just expands. I don't want it to be called in from another file or anything, if that makes sense.
Thank you in advance for any and all help. It will be greatly appreciated!
Testudo

Answer 1

an easy solution would be this
you will just need 2 toggle events in css with display: none; and display: block;
http://jsfiddle.net/6W7XD/1/
of course you would need to pre-program where you want to start the hide by including a div of it with the close button span inside the div to do the toggles
and if u do decide to javascript it
here is what you can look at
http://jedfoster.com/Readmore.js/

Answer 2

I think you need to use Jquery or Javascript
$('a').click(function() {
var p = $('a').prev('p')
var lineheight = parseInt(p.css('line-height'))
if (parseInt(p.css('height')) == lineheight*2) {
p.css('height','auto');
$(this).text('Less')
} else {
p.css('height',lineheight*2+'px');
$(this).text('More')
}
});
DEMO

Answer 3

This can be achieved using the :target selector for a jQuery/Javascript-less option.
To do this, you need to set each of the expanding texts as targets (give them an id). Then, set the "Show more" tab as a target to said id/target.
Something like:
.article {
position: relative;
border: 1px solid grey;
overflow: hidden;
width: 300px;
}
.article:target {
height: auto;
}
.article:not(target) {
height: 50px;
}
.toggle {
padding: 2px;
position: absolute;
right: 0px;
bottom: 0px;
background: white;
border: 1px solid red;
}
You can view a testable fiddle here.
Note I use :not(:target) to make sure it's the right size when not selected.