9 replies [Last post]
kemble
Offline
Regular
Last seen: 9 years 9 weeks ago
Timezone: GMT-4
Joined: 2007-10-30
Posts: 33
Points: 0

I saw on a website some text that was ultimately like 6 paragraphs long. However only the first paragraph was shown. There was a "more..." at the end of the first paragraph. When the user clicked on it, the page expanded to show the rest of the content. The "more..." dissapeared from the end of the first paragraph and a "...close" was now at the end of the last paragraph. When the user clicked on the "...close" it collapsed back to the first paragraph and the "...more" was back.

I tried to view source and duplicate what the website had but what they had was made in javascript. I searched for the javascript and found it but I was not able to get it to work. Then I found a forums that said it can be done in CSS but they only were allowed to expand the text and not collapse it.

Can someone instruct me on how to do this?

Many thanks,

Doug

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Maybe something like this:

Maybe something like this: http://www.search-this.com/2007/11/08/look-whats-just-popped-up/

If that's not it, I'd suggest that whoever said it could be done without javascript might've been leading you astray.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kemble
Offline
Regular
Last seen: 9 years 9 weeks ago
Timezone: GMT-4
Joined: 2007-10-30
Posts: 33
Points: 0

heres something similar to

heres something similar to what I want.

http://www.cssplay.co.uk/menu/more.html#more

Someone also wrote this

Switch menu

body {

text-align:center;

margin:30px;

}

#wrapper {

text-align:left;

margin:0 auto;

width:500px;

min-height:100px;

border:1px solid #ccc;

padding:30px;

}

.holder {width:500px; margin:0 auto; padding:30px; border:1px solid #ccc; min-height:

100px;text-align: left;}

a.hid {color:#000; text-decoration:none; outline-style:none;}

a.hid em {display:none;}

a.hid:hover {text-decoration:none;}

a.hid:active, a.hid:focus {background:#fff;}

a.hid:active span, a.hid:focus span {display:none;}

a.hid:active em, a.hid:focus em {display:block; color:#555; font-style:normal;

cursor:default;border:1px solid #ccc;

background:#f2f2f2;padding: 20px;}

.clear {clear:both;}

expand and collapse Menu" rel="nofollow">Return to "DHTML expand and collapse div menu" article"

Switch it now

This is paragraph text that is all up in this place that does some pretty cool

stuff

This is paragraph text that is all up in this place that does some pretty cool

stuff

This is paragraph text that is all up in this place that does some pretty cool

stuff

This is paragraph text that is all up in this place that does some pretty cool

stuff

But its not completely finished.... or at least not finished to what I would like it to do.

Here is what I'm trying to do, on this site: www.dansdecals.com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

So what's it not doing that

So what's it not doing that you want it to?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kemble
Offline
Regular
Last seen: 9 years 9 weeks ago
Timezone: GMT-4
Joined: 2007-10-30
Posts: 33
Points: 0

Ok, after a nights sleep I

Ok, after a nights sleep I figured I'd give it another try.
http://www.systemskins.com/sscart/index.html

I got the javascript version to work just fine when I opened it up in a brand new page, yet when I add it to my exsisting page it doesn't work. Oddly though... When I view page source on the New & working script it seams fine, yet when I view the page source on my exsisting page the javascript code is missing 1/2 its code.

Working code

My site with missing code:

both pages are using the same doctype so I'm confused. Why is the javascript coding 1/2 missing when you view source?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You're confused? There's no

You're confused? There's no javascript at all in the page you've linked to.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kemble
Offline
Regular
Last seen: 9 years 9 weeks ago
Timezone: GMT-4
Joined: 2007-10-30
Posts: 33
Points: 0

sorry, forgot that it links

sorry, forgot that it links you to a store front page.

http://www.systemskins.com/sscart/home.php

kemble
Offline
Regular
Last seen: 9 years 9 weeks ago
Timezone: GMT-4
Joined: 2007-10-30
Posts: 33
Points: 0

Got it to work... Because of

Got it to work... Because of the shopping cart/page system (.tpl files) I am using I had to add {literal} tags around the Javascript code for it to work.

meandcat
meandcat's picture
Offline
Regular
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2007-03-14
Posts: 33
Points: 1

Another expand script for backup

Hi, I know you solved it. However, there is one on dynamic drive is very good.

http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm

Hope this can help some one else.

kemble
Offline
Regular
Last seen: 9 years 9 weeks ago
Timezone: GMT-4
Joined: 2007-10-30
Posts: 33
Points: 0

yeah I seen that one but I

yeah I seen that one but I didnt want those graphic bars.