make div appear only on active state of another

Question

what I want is that div with id makeMeWork to be visible only when div with id clickMe is clicked.

html:

<div class="showhim">Press ME<div class="showme">Working</div></div>
<div class="showme" id='makeMeWork'>Not Working</div> <div class="showhim" id='clickMe'>Press ME</div>

css:

.showme{ 
    display: none;
    background-color:red;
    width:200px;
    height:50px;
}
.showhim:active .showme{
    display : block;
    background-color:green;
}

I want this done purely through css as js and HTML part can no longer be modified. I guess the major problem now is, there is no way to select previous child in css,

similar questions : is-there-a-previous-sibling-selector and show-div-on-hover-with-only-css

[**fiddle**](http://jsfiddle.net/tbnsoc3y/) wrap in a `div` and give styles for parent — Vitorino fernandes, Nov 12 '14 at 06:25

Suraj Rawat · Answer 1 · 2014-11-12T06:39:51.003

1

Right Now There is No previous selection of sibling available but it will be soon in css4 which has been drafted in w3c and they are working on it , ill tell use jquery or css hack !

Read the article

edited Nov 12 '14 at 06:39

answered Nov 12 '14 at 05:52

Suraj Rawat

3,685
22
33

score 1 · Accepted Answer · answered Nov 12 '14 at 09:58

1

do something like this

demo - http://jsfiddle.net/tbnsoc3y/

wrapping your content in div for eg like i have done

<div class="cont">
    <div class="showme" id='makeMeWork'>Not Working</div>
    <div class="showhim" id='clickMe'>Press ME</div>
</div>

answered Nov 12 '14 at 09:58

Vitorino fernandes

15,794
3
20
39

make div appear only on active state of another

2 Answers2