homepage Welcome to WebmasterWorld Guest from 54.211.68.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Hide / Show Box
kiwis



 
Msg#: 4373769 posted 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

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



 
Msg#: 4373769 posted 8:57 pm on Oct 12, 2011 (gmt 0)

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

htmlbasictutor



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

jQuery

tangor

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



 
Msg#: 4373769 posted 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

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



 
Msg#: 4373769 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4373769 posted 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