This question already has an answer here:
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
With strictly CSS, no this isn't possible. With jQuery:
$("#idOfPlus").click(function() {
$("#myPlusDiv").show();
});
It is not possible using plain CSS. You can opt for any javascript framework.
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.
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.
