Hide / Show Box

[kiwis]

I have a div tag with a few paragraphs of into in there, what i would like to do it have a small one line in there as a link called "Show Message" and then is expands the box. After expanding you click another message saying Hide.

HOw can I do that?

[lucy24]

"with javascript" is the answer that comes to mind.

[htmlbasictutor]

Here is an example of how it can be done (not my site! Found via Google search)

How to hide, show, or toggle your div
randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

[seaxking]

jQuery

[tangor]

Whatever choice is made, a good code practice to maintain user engagement is to degrade gracefully to standard links when JS is not turned on. Many on the web are now blocking javascript in their browsers. Having a degrade fall back means you won't lose the traffic.

[lucy24]

Oh, hey. How much text are we talking about? There's always the tried-and-true Title tag...

[alt131]

Perhaps a css option? :)

kiwis, you need to provide more information about the browsers you are supporting as this can be done in a number of ways. For example, Safari and ie8 do not support the general sibling combinator with pseudo classes except hover, but for modern FF and Opera it takes as little as this:

/*styles for the example */
div {width:400px;border:3px double #ddd; border-style: none double double none;background-color:#eee;font-family: verdana;}
a {font-weight:bold; color:#800;text-decoration:none; outline:none}
/*hide the p and last link */
p, a:last-of-type {visibility:hidden}
/*make them visible when the a is clicked */
a:active~p, a:focus~p, a:active~a:last-of-type, a:focus~a:last-of-type {visibility:visible; }
/*and hide the first link at the same time */
a:active:first-of-type, a:focus:first-of-type {visibility:hidden}
<div>
<a href="#">Show Message </a>
<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
<a href="#">Hide Message</a>
</div

Stu Nicholls has four demo's [cssplay.co.uk] using display:none/block and a small amount of javascript dating from 2007, however I'd suggest using visibility rather than display to avoid issues with assistive devices. pmob [pmob.co.uk] has an interesting example using overflow.