homepage Welcome to WebmasterWorld Guest from 54.227.25.58
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Hide / Show Box
kiwis




msg:4373771
 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?

 

lucy24




msg:4373802
 8:57 pm on Oct 12, 2011 (gmt 0)

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

htmlbasictutor




msg:4375571
 7:07 pm on Oct 17, 2011 (gmt 0)

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




msg:4375646
 11:20 pm on Oct 17, 2011 (gmt 0)

jQuery

tangor




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

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




msg:4375740
 4:16 am on Oct 18, 2011 (gmt 0)

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

alt131




msg:4375895
 12:08 pm on Oct 18, 2011 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved