Collapsible Paragraph

[Guest]

I've asked this quesiton before, but maybe I'm not explaining what I want
very well. I want a expand/collaspible paragraph. Clink on a word and the
paragraph expands giving futher information. Clink on the same word, and the
paragraph collapses. Tina Carke gave me information on an add-in, but I'm
struggling to make it work.

 

[clintonG]

Google: "collapsible content" but note your real challenge will be finding a
copy and paste cross-browser solution.

Post the URL for the add-in and I may have comments the first of which
presumes continuing to expend time to make it work may be a waste of time as
it is very likely that it will not function with Mozilla based browsers such
as Netscape 7 and that new scamp on the block Firefox.

 

[Murray]

This is very simple to do with CSS and javascript. And It'll work in all
browsers v4+, too.

Use the javacsript to swap the class on the paragraph tag. Use the CSS to
create two classes - one with display:block and the other with display:none.

The javascript has to toggle the class setting between the two (or it could
write the style dynamically).

There are no browser issues here.

In FP, you can get almost all the way there via the UI. For example, if you
have this on a page -

<p>Here is a bunch of explanation using the word "<a
href="javascript:;>ameliorate</a>" blah blah blah</p>
<span id="foo" style="display:none">This is some additional text about
ameliorate</span>

If you click in the word "ameliorate, and apply a Change Property behavior
to it, you can then select the <span> with id "foo" and ADD a change of
style.display (for Property Name) to "inline".for Property Value.

Given this method, once the block of text is shown, however, it will only be
unshown on refresh of the page, so you would have to implement a toggle of
some sort. Sorry - I can't help with that but it can't be hard....

 

[Guest]

Thanks very much. I'll give it a try.

This is very simple to do with CSS and javascript. And It'll work in all
browsers v4+, too.

Use the javacsript to swap the class on the paragraph tag. Use the CSS to
create two classes - one with display:block and the other with display:none.

The javascript has to toggle the class setting between the two (or it could
write the style dynamically).

There are no browser issues here.

In FP, you can get almost all the way there via the UI. For example, if you
have this on a page -

<p>Here is a bunch of explanation using the word "<a
href="javascript:;>ameliorate</a>" blah blah blah</p>
<span id="foo" style="display:none">This is some additional text about
ameliorate</span>

If you click in the word "ameliorate, and apply a Change Property behavior
to it, you can then select the <span> with id "foo" and ADD a change of
style.display (for Property Name) to "inline".for Property Value.

Given this method, once the block of text is shown, however, it will only be
unshown on refresh of the page, so you would have to implement a toggle of
some sort. Sorry - I can't help with that but it can't be hard....

 

[Murray]

The only thing to worry about is the non-toggle nature of my solution. But
give it a go, and post back with your progress, please.

 

[Susan]

http://easternshoreartcenter.com/charity.htm
This has a collapsible feature.
Susan

 

[Murray]

Nice -

<!--webbot bot="PurpleText"
PREVIEW="I wish to thank MS-MVP Jim Buyens for initially giving me the
JavaScript code to make a collapsible list for this page. I also wish to
thank AOL's Comp Host Hikk for giving me example of the JavaScript code to
make a collapsible list which would work both in Netscape and MSIE. I was
not looking for example that worked both in Netscape and MSIE but stumbled
upon it and my interest in it spurred me on.

Susan - Volunteer Webmaster " -->