/    Sign up×
Community /Pin to ProfileBookmark

CSS add text onclick?

Copy linkTweet thisAlerts:
Aug 20.2007

Hi,

I want to have a page with a few headings and then when clicked displays text underneath the applicable heading.

I would prefer to do this with CSS if possible as I am interested in using it in a newsletter later on also.

Thanks,

Jim

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelAug 20.2007 — Short of making the HEADER be a link and stuffing the link with "<span></span>" text, hiding it and revealing it on hover or on click with the appropriate pseudo-class, this sounds more like a javascript thing.

Here is what I mean:

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm
Copy linkTweet thisAlerts:
@JimGfBauthorAug 20.2007 — Thanks, that is exactly what I am looking for but also I was looking at something that only used CSS as I may need to use this or something similar in an email newsletter.

I will have a look at combining <span> and onclick, I am using a span and hover combination already, I wanted to have the text appear as if it was a paragraph below, would this be using positioning in css?

I tried looking something like that up before, however there were no examples I could easily find, I will muster something up that will hopefully work.

Otherwise I will use Javascript
Copy linkTweet thisAlerts:
@CentauriAug 20.2007 — Something like this may be want you want.
Copy linkTweet thisAlerts:
@huckleAug 20.2007 — This is completely untested, but who knows? It may work:

<div id="content">

<h2>Header</h2>

<div id="hidden_content">Content</div>

</div>

The CSS:

#content div#hidden_content{

display:none;}

#content h2:hover div#hidden_content{

display: block;}

It's based on http://meyerweb.com/eric/css/edge/popups/demo.html

If it works at all you will probably have some browser issues as its hardly standard practice to apply pseudo-classes to h2s/divs!

If it does work, please let me know! (If it doesn't let me know what you find works...)

Huckle
×

Success!

Help @JimGfB spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...