Expandable paragraphs with HTML and CSS

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

You cant really do this without Javascript. But it only requires a few lines and you dont need to use jQuery. You will set everything up with CSS. Have two classes one "show" and one "hide" and simply use a button with an onClick and use Javascript to change the class of that element from show to hide. If you are willing to use a bit of JS let me know and ill post a proper answer — GifCo, Aug 25 '14 at 16:15
Thank you for your response! I don't mind using JavaScript. If you would, I would like to take you up on your offer. If I can show my client that it will be light and not intrusive, they may well use it. They are afraid that using a script will negatively effect load times and SEO result. That would be great if you can help me out. Thank you! — user3704175, Aug 25 '14 at 16:44
Added a non js/jQuery solution. It works, but it won't be nearly as pretty. — James Korden, Aug 25 '14 at 16:47

score 2 · Accepted Answer · answered Aug 25 '14 at 16:15

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/

score 1 · Answer 2 · answered Aug 25 '14 at 16:16

1

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

answered Aug 25 '14 at 16:16

Rahul Tripathi

168,305
31
280
331

1

This is how I would do it too. With a little styling, of course. And maybe use animate instead of css, for less jarring transitions. – James Korden Aug 25 '14 at 16:18
@JamesKorden:- But for this you need to use JQuery. And offcourse you can add styling. You may check this for details:- http://www.webdevdoor.com/jquery/expandable-collapsible-panels-jquery/:) – Rahul Tripathi Aug 25 '14 at 16:18
Ah yeah, this could be achieved with css to a degree, but you really want jQuery to handle this well. – James Korden Aug 25 '14 at 16:20
@JamesKorden:- Yes thats why I mentioned that as the first line ;) – Rahul Tripathi Aug 25 '14 at 16:21
Thank you for your responses. I will check out your suggestions. If it works smoothly, then I may be able to convince them to use it. They are concerned about scripts negatively impacting SEO results and page loading. – user3704175 Aug 25 '14 at 16:47
@user3704175:=Do not forget to accept this as an answer if that helped! :) – Rahul Tripathi Aug 25 '14 at 16:49

James Korden · Answer 3 · 2014-08-25T16:44:49.020

0

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.

edited Aug 25 '14 at 16:44

answered Aug 25 '14 at 16:26

James Korden

724
4
19

Thank you in advance for your response. I don't think that they are going to dig that, but it is definitely a way to do it. I am going to try some script and see if I can get them to see that it works. – user3704175 Aug 25 '14 at 16:49
What exactly won't they like? The styling isn't really done on it, but that wasn't really in the scope of the problem. I can provide examples of better styling if that's the issue. – James Korden Aug 25 '14 at 16:51

Expandable paragraphs with HTML and CSS

3 Answers3