3 replies [Last post]
b_electro
b_electro's picture
Offline
Regular
Last seen: 6 years 42 weeks ago
Timezone: GMT-6
Joined: 2007-05-01
Posts: 50
Points: 20

I know there are numerous expand/collapse .js and .css scripts/tutorials out there, but this example does EXACTLY what I want (click on "more" in Bio section):
http://www.rcrdlbl.com/artists/Bad_Brains/music

What I like about this method is there is a bit of teaser copy in the collapsed state, followed by an ellipses. On expand, the ellipses disappears and the entire copyblock is displayed. OK experts, how do you think rcrdlbl.com does it?

Tags:
Triumph (not verified)
Anonymous's picture
Guru

Did you happen to have a

Now Bad Brains is an awesome, awesome band but did you happen to have a question pertaining to CSS Styling?

I didn't look into it but I'm going to assume it's done using the collapse.js mentioned in the head.

Moving from CSS Styling to Off Topic.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

b_electro wrote:OK experts,

b_electro wrote:
OK experts, how do you think rcrdlbl.com does it?

Get yourself the Firebug extension for Firefox and you will see exactly how it operates. There are two spans, one contains an elipsis and a "more" link and the other contains the rest of the text and a "less" link. Clicking on the visible link triggers javascript which switches the display value of each span, one from inline to none and the other from none to inline.

This style of toggling can only be done with JS (or on server-side). The closest you can get with CSS would be to use a :focus rule, however that would mean you could not have more than one "more" link on display at a time.

This particular implementation fails when javascript is disabled. A better method is to alter the class of the parent element, where one class ensures the elipsis is displayed and the other class ensures the entire text is displayed. Then if javascript is disabled the page can be generated on server-side with the appropriate class.

Another alternative is to have the entire text visible by default and have the page trigger (onload) some javascript to show the "more" link (and the "less" link). If javascript is disabled the page onload event will never trigger and you have a consistent page - all the text and no links.

b_electro
b_electro's picture
Offline
Regular
Last seen: 6 years 42 weeks ago
Timezone: GMT-6
Joined: 2007-05-01
Posts: 50
Points: 20

Thanks for the thorough

Thanks for the thorough reply. I knew it was .js but you're right, should've checked it out w/ firebug. OK, I'm going to try to replicate this. THANKS!