By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,987 Members | 1,552 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,987 IT Pros & Developers. It's quick & easy.

Set block element display:none on click

P: n/a
VK
Hi,

given a block element with some content and a link, is it possible to
set this element display to none by CSS only? It has to be done only
once. It is an absolutely positionned element so visibility:hidden will
do as well.

<div>
<p>Some content</p>
<p><a href="#">Hide</a></p>
</div>

Nov 3 '06 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Scripsit VK:
given a block element with some content and a link, is it possible to
set this element display to none by CSS only?
Of course. You just set display: none for the element.

The correct answer to the question you ask in the Subject line is "No."
There is no CSS selector related to clicking. (It's a bad idea to imply
anything from the Subject line in the message body, and particularly bad to
ask a similar-looking but quite different question.)
It has to be done only once.
Huh? This relates to clicking, right? The answer is even more "No."
It is an absolutely positionned element so visibility:hidden
will do as well.
This doesn't matter, since the problem is not with properties but with the
impossibility of "capturing" the click in CSS terms.
<div>
<p>Some content</p>
<p><a href="#">Hide</a></p>
</div>
You do realize, don't you, that in HTML terms the link points to the start
of the current document, instead of being a no-op.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 3 '06 #2

P: n/a
On 2006-11-03, Jukka K. Korpela <jk******@cs.tut.fiwrote:
Scripsit VK:
>given a block element with some content and a link, is it possible to
set this element display to none by CSS only?

Of course. You just set display: none for the element.

The correct answer to the question you ask in the Subject line is "No."
There is no CSS selector related to clicking.
There are the :active and :focus pseudoselectors, but I doubt they can
actually be used to achieve what the OP wants.
Nov 3 '06 #3

P: n/a
VK
The correct answer to the question you ask in the Subject line is "No."
There is no CSS selector related to clicking.
a:hover a:active a:visited ?

"CSS-only navigation menus" ?
It has to be done only once.
Huh? This relates to clicking, right?
Yep: it means I don't care how to get the element back (again by CSS
means only, no scripting) after clicking.
<div>
<p>Some content</p>
<p><a href="#">Hide</a></p>
</div>

You do realize, don't you, that in HTML terms the link points to the start
of the current document, instead of being a no-op.
Moreover, I even know that these funny words in brackets are called
T-A-G's and you do stuff with them in ... that's the difficult one...
H-T-M-L
As you can see I'm rather well prepared, but still thank you for taking
your time to explain.
;-)

Anyway, I needed a warning in <noscriptuser could remove from the
screen but only after having read it. Obviously I needed CSS only means
as the situation presumes no script support. Not to say I do care too
much about such situations as they are not relevant to my target
auditory; yet I wanted to keep a solution in my folder (for
presentational purposes).

This is what I did (either disable your script support or remove
<noscripttags to see it):

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style>

#noScript {
display: block;
position: absolute;
top: 20px;
left: 20px;
width: 40%;
margin: 0px 0px;
padding: 10px 10px;
border: medium solid red;
background-color: white;
color: black;
font: bolder 100% Verdana, Geneva, sans-serif;
line-height: 200%;
text-align: center;
text-decoration: none;
cursor: default;
}

#noScript: active {
display: none !important;
}

#noScript:visited {
display: none !important;
}
</style>
</head>

<body>

<h1>Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<noscript
><a id="noScript" href="#"
<span>Client-side scripting is disabled.<br
Some extended features of this page will
be not available.</span><br
><span style="
color:blue;
text-decoration: underline;
cursor: pointer;"
>Dismiss this warning</span
</a
</noscript>
</body>
</html>

Nov 3 '06 #4

P: n/a
In article <11**********************@b28g2000cwb.googlegroups .com>,
VK <sc**********@yahoo.comwrote:
>Hi,

given a block element with some content and a link, is it possible to
set this element display to none by CSS only? It has to be done only
once. It is an absolutely positionned element so visibility:hidden will
do as well.

<div>
<p>Some content</p>
<p><a href="#">Hide</a></p>
</div>
You probably be able to do it eventually with CSS3 selectors:

<style type="text/css">
p#note:target {display: none}
</style>

ASDFG
<p id="note"><a href="#note">Hide</a></p>
ZXCVB

This works in Firefox 2.
--
John P Baker
Nov 3 '06 #5

P: n/a
VK
You probably be able to do it eventually with CSS3 selectors:
>
<style type="text/css">
p#note:target {display: none}
</style>

ASDFG
<p id="note"><a href="#note">Hide</a></p>
ZXCVB

This works in Firefox 2.
Thank for the tip, I'll keep it. For with the current support for CSS3
extra selectors I better stay I guess with the overloaded A element.
A year or two later things will get much easier I guess... :-)

Nov 3 '06 #6

P: n/a
Scripsit VK:
>The correct answer to the question you ask in the Subject line is
"No." There is no CSS selector related to clicking.

a:hover a:active a:visited ?
What makes you think any of them relates to clicking?

If you actually _meant_ hovering or activation (whatever that means - the
specs don't say) or having been visited, why did you write about clicking?
>><p><a href="#">Hide</a></p>
</div>

You do realize, don't you, that in HTML terms the link points to the
start of the current document, instead of being a no-op.

Moreover, I even know that these funny words in brackets are called
T-A-G's and you do stuff with them in ... that's the difficult one...
H-T-M-L
Your willingness to look amusing seems to exceed your willingness to learn
the basics of HTML. You are _still_ using href="#" in your code snippet,
apparently without ever considering what happens when the link is actually
used the way links are meant to be used. By clicking on it, for example.
Perhaps in a non-CSS browsing situation.
Anyway, I needed a warning in <noscriptuser could remove from the
screen but only after having read it.
That's simply pointless. Either you make your page work with scripting
disabled, or you don't. In rare cases, you might have reasons to explain
_what_ the user is actually missing when scripting is off, but what you seem
to work with is worse than useless technobabble and irritation:
><span>Client-side scripting is disabled.<br
>Some extended features of this page will
be not available.</span><br
(BTW, your technique does not work on IE 7, for example, even for your
definition of "work". I guess I know why, but I don't know why I would
bother.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Nov 3 '06 #7

P: n/a
VK
a:hover a:active a:visited ?
>
What makes you think any of them relates to clicking?

If you actually _meant_ hovering or activation (whatever that means - the
specs don't say) or having been visited, why did you write about clicking?
Boring to anser
You do realize, don't you, that in HTML terms the link points to the
start of the current document, instead of being a no-op.
Moreover, I even know that these funny words in brackets are called
T-A-G's and you do stuff with them in ... that's the difficult one...
H-T-M-L

Your willingness to look amusing seems to exceed your willingness to learn
the basics of HTML. You are _still_ using href="#" in your code snippet,
apparently without ever considering what happens when the link is actually
used the way links are meant to be used. By clicking on it, for example.
You desire to be boring and irritating seems exceed sometimes your
ability to be helpful. Anyone who programmed for NN2, NN3/IE3 knows
about # anchor and the "scroll to top" effect caused by it at that time
in pseudo links. That is why I was smiling: because it's like
explaining what a hammer is to a carpenter.

In my case I'm using # anchor exacly because of its function.
That's simply pointless. Either you make your page work with scripting
disabled, or you don't. In rare cases, you might have reasons to explain
_what_ the user is actually missing when scripting is off, but what you seem
to work with is worse than useless technobabble and irritation:
I'm on the other side of the pond you're sitting in.

Nov 3 '06 #8

P: n/a
"VK" <sc**********@yahoo.comwrites:
Moreover, I even know that these funny words in brackets are called
T-A-G's
… generic identifiers and attribute specifications (just to rescue the
orphaned possessive case) …
and you do stuff with them in ...
As far as tags are concerned, one describes stuff with them (hence
‘descriptive markup’, as opposed to processing instructions).
that's the difficult one...
H-T-M-L
As you can see I'm rather well prepared, but still thank you for taking
your time to explain.
;-)
I sense an upcoming explanation of ‘the basics’ for the rest of us. :)
--
||| hexadecimal EBB
o-o decimal 3771
--oOo--( )--oOo-- octal 7273
205 goodbye binary 111010111011
Nov 4 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.