/    Sign up×
Community /Pin to ProfileBookmark

Hide/Show div on mouseclick with CSS (no JS)?

Copy linkTweet thisAlerts:
Dec 08.2007

Is there any way to show or hide a div without javascript? I’ve poked around looking for an answer, but my Googling skills have failed me. I did find someone who claimed it was possible to hide a div, but not make one show up, without javascript. Unfortunately that person did not post any code on how to go about doing it.

So I am wondering if anyone knows of a way to either show a div, or hide a div, when an image link is clicked. It doesn’t matter whether a hidden div shows up, or a visible div is hidden, as I can use z-indexes to accommodate either situation.

Thanks

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriDec 08.2007 — It can be done using the :active and :focus psuedo classes of the linked image as long as the content to be shown can be a child of the linked object, as shown in this demo. If you need to show/hide an unrelated object, then javascript is required.
Copy linkTweet thisAlerts:
@Blackb3rryauthorDec 08.2007 — What if the image were hidden under another div? Is there any way to place a div visibly over another div with z-index, but make it so the div under it can be clicked?
Copy linkTweet thisAlerts:
@iishaDec 11.2007 — There is a way to access hidden/non-displayed content to the front with a click without JS. You have to use the #target pseudo-attribute and (as Centauri said very well) as long as a child element is the one you want to make appear.

For example, a simple navbar:
[code=html]<ul>
<li id='one'><a href='#onechild'>Parent one</a>
<ul id='onechild'>
<li>Child one</li>
<li>Child two</li>
</li>
<li id='two'><a href='#twochild'>Parent two</a>
<ul id='twochild'>
<li>Child three</li>
<li>Child four</li>
</ul>
</li>
</ul>
[/code]

The CSS:
[CODE]
ul[id ~= 'child'] { display: none; }
ul:target { display: block; }
[/CODE]

See if this is done correctly, i believe it is. Take care!
Copy linkTweet thisAlerts:
@CentauriDec 11.2007 — Is there any way to place a div visibly over another div with z-index, but make it so the div under it can be clicked?[/QUOTE]

Not really - this method is used to prevent or restrict the area which can be clicked (or selected).
Copy linkTweet thisAlerts:
@WebJoelDec 12.2007 — How much 'content' to you need to hide/show? This sounds vaguely like a 'tool-tip' whereby an anchor has text (visible) with a "<span>more text</span>" that is "[B]display:none;[/B]" until a state it changed (like, :hover or :active) then, it becomes "[B]display:block;[/B]" and thus, visible again. This, positioned correctly, this could be as wide as the 'visible' portion, and appear 'just below' as~if a drop-down (or wherever you need to appear)... and, it's entirely CSS.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

a:link {color:#212121;}

a:visited {color:#008080;}

a:hover {color:#FF0000;}

a:active {color:#000000;}

/* above: controls colors of links */

.buttons a {color:#000000; background-color:white; display:block;

font:13px arial, sans-serif; font-weight: bold; text-decoration:none;

margin-top:3px}

/* Above: controls how 'buttons' anchors behave */

.buttons a:hover {background-color:#ffffff; font:13px bold verdana; text-decoration:none;}

/* Above: controls how 'buttons anchor on-hover' behave */

#menu {position:relative; width:160px; height:auto;

text-align:center; padding:10px 0 10px 0; border:1px double silver;}

/* Above: the actual "menu", a list of links */

#menu a span {display:none;}

/* Above: how the "<span>text la-la-la text</span>" is handled */

#menu a:hover span {display:block; position:absolute; top:195px; left:10px;

width:125px; z-index:100; color:black; background-color:#fff99d; padding:10px;

font:1em Verdana, sans-serif; border:1px solid black;

/* Above: how the <span>text la-la-la text</span> is handled when

hovering over the visible link-text (the 'pop-up') */

}

</style>


<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->

</head>

<body>

<div class="buttons">

<div id="menu">

<a href="#">Name of song from<br /> "Mary Poppins"...<span>Supercalifragilisticexpialidocious</span></a>

<a href="#">The McDonald's<br />tv jingle...<span>Twoallbeefpattiesspecialsaucelettucecheesepicklesonionsonasesameseedbun</span></a>

<a href="#">Longest<br /> non-tech word in<br />most dictionaries...<span>floccinaucinihilipilification </span></a>

<a href="#">Longest officially recognized<br /> place name...<span>Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu</span></a>

</div>

</div>

</body>

</html>[/QUOTE]
Copy linkTweet thisAlerts:
@OriginalMacBabeDec 24.2007 — 
The CSS:
[CODE]
ul[id ~= 'child'] { display: none; }
ul:target { display: block; }
[/CODE][/QUOTE]

?

I find what you suggesting interesting, but I'm not well versed enough in the use of pseudo classes to be able to dismantle what you have suggested as css. It is clear that I am supposed to fill in a lot of blanks, but I really don't know what they are.

Can you expand this, please?

Thanx
×

Success!

Help @Blackb3rry 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.15,
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,
)...