Welcome to WebmasterWorld Guest from 23.22.17.192

Forum Moderators: not2easy

Message Too Old, No Replies

Hide / Show Box

   
7:09 pm on Oct 12, 2011 (gmt 0)



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?
8:57 pm on Oct 12, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



"with javascript" is the answer that comes to mind.
7:07 pm on Oct 17, 2011 (gmt 0)

5+ Year Member



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/
11:20 pm on Oct 17, 2011 (gmt 0)



jQuery
11:47 pm on Oct 17, 2011 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
4:16 am on Oct 18, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Oh, hey. How much text are we talking about? There's always the tried-and-true Title tag...
12:08 pm on Oct 18, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.