How to Make an Expanding Text Container?

Question

Is it possible to create a div tag (or some type of container
object) that can reference a large body of text (such as a long
article for example) and only show the first few paragraphs with a
link at the bottom to expand the container to show the entire
contents pushing any objects below it further down the page?
I'm using php to include a large html article inside of a div
tag on a newsletter page and would like to learn how to create a
partial display that can expand to show everything only if the user
decides to read more.
Could someone please point me in the right direction in order
to learn how to do this?
Thanks!
~Greg

Answer 1

Here is what you have in the onclick event :
if(document.getElementById('article_snippet').style.display
== 'block') {
document.getElementById('article_snippet').style.display =
'none';
document.getElementById('article').style.display = 'block';
}else{
document.getElementById('article').style.display = 'none';
document.getElementById('article_snippet').style.display =
'block'
On first click, you are checking 'article_snippet' for the
value of
.style.display However, the wayt it works is that .style
values are
NEVER the one in an external, or even an embedded style
sheet. They is
ONLY the ones in *inline* styling. And your div does not have
that
style inline initially.
So, on the first click, no such style is found, and the else
phrase is
run, setting an INLINE value for
article_snippet.style.display to 'block'.
Then on the second click the first condition is met because
the element
now has an inline style with display=block, And the script
now runs as
you thought it would on first click.
Does that make sense?
E. Michael Brandt
www.divaHTML.com
divaGPS | divaFAQ
www.valleywebdesigns.com
JustSo PictureWindow
Myrrhlin225 wrote:
> Hello Again,
> Well, I managed to get this to "almost" work based on
the resource posted
> above by Alec. However, given my limited experience with
javascript, I seem to
> have a slight problem in that the show/hide link must be
clicked TWICE (but
> only the first time) in order for everything to work
properly.
>
> Could someone who really knows javascript please have a
look at my source code
> and tell me what I might need to change in order to get
this toggling link to
> work when a user clicks on it for the first time? I just
don't want people to
> have to click twice in order to see the full article.
>
> Thanks!
> ~Greg
>