Welcome to WebmasterWorld Guest from 54.160.221.82

Forum Moderators: not2easy

Message Too Old, No Replies

Hide / Show Box

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

New User

joined:Sept 9, 2011
posts: 6
votes: 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)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12696
votes: 244


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

Junior Member

5+ Year Member

joined:Mar 17, 2010
posts: 88
votes: 1


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)

New User

5+ Year Member

joined:Aug 2, 2010
posts:1
votes: 0


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

Senior Member from US 

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

joined:Nov 29, 2005
posts:6132
votes: 277


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)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12696
votes: 244


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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.