I'm making a Accordin for a site when i will click on + icon then another div will show. i'm using jquery for this. but is this possible in css to open a div on click on another element
+1
A:
With strictly CSS, no this isn't possible. With jQuery:
$("#idOfPlus").click(function() {
$("#myPlusDiv").show();
});
Nick Craver
2010-01-30 13:32:51
+1
A:
It is not possible using plain CSS. You can opt for any javascript framework.
Rakesh Juyal
2010-01-30 13:36:36
A:
Yes it is possible with the focus pseudo-class:
<html>
<head>
<style type="text/css">
#hidden { display: none; border: 2px solid green; cursor: default; }
a {text-decoration: none;} /* unvisited link */
a, div:visited { color: blue; }
a:focus #hidden { color: black; display: block; }
</style>
</head>
<body>
<a href="#">Click to show box
<div id="hidden">More information!<br/>Click outside to remove</div>
</a>
</body>
</html>
Even though this does (kinda) what you want it is not usable since your box is in the link and thus clickable. And when clicking outside the box, it is closed. So unless this is not a problem to you, I have to say it seems kinda impossible for me as well...
(Unless someone else is better than me in using CSS and can think of something more clever)
Edit: If you find another HTML element that supports the focus pseudo-class, it might be better than using an <a> element as my example does.
Veger
2010-01-30 13:36:53
how ? i'm talking about click effect
metal-gear-solid
2010-01-30 13:37:51
Can you define what you mean by 'click effect.'
David Thomas
2010-01-31 01:21:47
A:
You can make the icon an anchor that points to itself or nothing (href="#") and then use :active to trigger the class change. But the only catch is that as soon as they are not clicking, it will return to the non-active state, so your accordion would close as fast as it opened unless you had another rule to hold the class.
Anthony
2010-01-30 13:40:04