How to set multiple conditions on css3 - css

Question

I'm trying to write script on css that display a div on click and hide another div at same time.
CSS:
.box{
display:none
}
.box:target{
display:block;
}

Answer 1

You can't, because CSS doesn't listen for client-side clicks. The closest you'll get is :active, which registers when the mouse button is held down.
You can, however, do this with the Checkbox Hack: http://tympanus.net/codrops/2012/12/17/css-click-events/
1 Wrap an element in a checkbox
2 Use CSS like this: input[type=checkbox]:checked ~ #IDOfElementWrappedInCheckbox
And, also on the link,
The :target Way:
'There is another way, well known to “fake” a click event with CSS, using the :target pseudo-class. This pseudo-class is quite similar to the :hover one in the way that it matches only a specific scenario.
The special event for the :target pseudo-class depends on what we call a “fragment identifier”. To put it simple, this pseudo-class refers to a hashtag you can see sometimes at the end of the URL. So it matches when the hashtag and the ID of an element are the same.
The HTML
Click me!
<p id="id" class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
The CSS
.to-be-changed {
color: black;
}
.to-be-changed:target {
color: red;
}
Basically, when clicking on the link (href="#id"), the URL changes and you go to the anchor #id in the page. In this very moment, the element having this id can be targeted with the :target pseudo-class.'
'and the :focus way (also on the link):
THE :FOCUS WAY
Let’s continue with another way using a pseudo-class; the :focus one this time. It’s pretty much the same idea, except, it doesn’t expect a URL change. It relies on the user’s focus on a particular element.
When you’re on a web page, you can press the tab key to navigate through various elements on the page. It’s particularly useful when filling forms, to go from one field to another without having to use the mouse. It’s also used by blind or visually impaired people to navigate through a site.
What’s important to note is that some elements can be focused, like links, inputs and such, and some other can’t, like paragraphs, divisions, and plenty others. Actually they can, but you’ll need to add the tabindex attribute with a numeric value.
How it works
The HTML
<span tabindex="0">Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
The CSS
span:focus ~ .to-be-changed {
color: red;
}
So, when you click on the span or reach it with the tab key, it becomes focused and matches the :focus pseudo-class. The adjacent sibling selector does the rest. Pretty easy, right? If you don’t want to mess with the tabindex for any reason, you can simply use a link with a # href. It will work like a charm as well.'
The last thing on the link,
'
The Transition Hack
This is probably the most wicked way to handle a click event in CSS. Seriously guys, this is madness. This technique comes from Joel Besada and has always been one of my favorite CSS tricks.
The idea is to store a CSS style in a CSS transition. Yeah, you read it right, a CSS transition. Actually, the idea is pretty simple. It relies on applying a pseudo-infinite delay to a change in order to prevent it to get back to the default value. It may sound complicated but it’s fairly easy, trust me. Please have a look at the code.
How it works
The HTML
<span>Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
The CSS
.to-be-changed {
transition: all 0s 9999999s;
}
span:active ~ .to-be-changed {
transition: all 0s;
color: red;
}
The idea behind the first declaration is to delay any change to approximately 116 days to make sure the changes will stay once they’ve been set. It is not infinite, but kind of, right?
But we don’t want to apply the changes 116 days after clicking, we want it to be set immediately! So the idea is to override the delay during the click (:active pseudo-class) to apply the changes. Then when the click will be released, the old transition property will kick back in, setting back the delay to 9999999s, preventing the changes to going back to the default state.'

Answer 2

i turn my comment into a short answer.
For youger browser you might do it in CSS.
.
shy , :focus ~ .show {
display:none;
}
:focus ~ .shy {
display:block;
}
:focus { /* toggle hide/show) just loosing focus on click */
pointer-events:none;
}
<p tabindex="0">click to hide/show (toggle) next content</p>
<div class="show"> shown if no click</div>
<div class="shy">shown if clicked</div>
http://codepen.io/gc-nomade/pen/oxybl