Onclick show/hide a div -only css and without href. NO jquery

Question

Initially visible box to user is blue box with text "hey there and hello". After user click on hello, grey box with text "how to" occupies the space of blue box and hello text changes to "close" text content added through css.

Now when I click on close, grey box again goes invisible and blue box appears again with text "hey there and hello". I've tried using focus but it's not helping.

Below follows the css that I'm trying to use. It would be great if I get some help. Focus isn't working. Only css has to be used.No anchor link or hrefs it's all about plain text.

 .blue-card { height: auto; min-height: 100px; display: block; padding: 1em; background: #FFFFFF; box-shadow: 0 6px 12px 0 rgba(27, 29, 31, 0.05); border-radius: 10px; position: relative; margin-bottom: 10px; } .grey-card { position: absolute; height: 100%; left: 0; top: 0; opacity: 0; visibility: hidden; z-index: 10; margin: 20px; max-height: 155px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2em; font-size: 14px; line-height: 24px; transition: 0.25s; -webkit-transition: 0.25s; -moz-transition: 0.25s; transform: scale(1.4) translateY(-100px); -webkit-transform: scale(1.4) translateY(-100px); -moz-transform: scale(1.4) translateY(-100px); } .grey-card { padding: 10px; font-size: 13px; min-height: 100px; } .grey-card { opacity: 1; visibility: visible; transform: scale(1) translateY(0); -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); } .grey-card-text { display: none; } .blue-box-text:focus~.grey-box { display: block; } .grey-box-text:focus~.blue-box-text { display: block; } .grey-box-text:before { content: "Close"; font-size: 12px !important; } 

 <div class="box-main"> <div class="blue-card"> <p class="blue-box-description">hey there</p> <div class="gs-c"> <span class="blue-box-text">hello</span> </div> </div> <div class="grey-card"> <h4 class="grey-box-text">How to?</h4> </div> </div> 

Answer 1

There is a trick way to achieve your goal using Check box hack

See the example bellow

 #myid { display: none; } #mylabel:after { content: 'Hello'; } #myid:checked~#mylabel:after { content: 'Close'; } 

 <div> <input id="myid" type="checkbox"> <label id="mylabel" for="myid"></label> </div> 

And if you want to use text Hello in html and Close in css you can use this :

 #myid { display: none; } .box { position: relative; } #mylabel { display: inline-block; } #myid:checked~#mylabel:after { content: 'Close'; position: absolute; top: 0; } #myid:checked~#mylabel { width: 0px; overflow: hidden; } 

 <div class="box"> <input id="myid" type="checkbox"> <label id="mylabel" for="myid">Hello</label> </div> 

Answer 2

You could use the flex box trick to change the order of your boxes. This will enable you to use the adjacent sibling selector both ways, thereby a work-around for the absence of previous-sibling selector in CSS.

Idea:

Have a wrapper container set to display:flex . Have your target div s absolutely positioned relative to this wrapper parent. Use tabindex to force the div to gain focus. Change the order of each other when focused along with opacity and position to aid the transition effects.

Example Snippet:

 * { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; } .wrap { display: flex; position: relative; width: 260px; } .blue, .gray { position: absolute; width: 120px; height: 3em; margin: 4px; padding: 8px; cursor: pointer; transition: all 0.5s; } .blue { order: 1; left: 0; opacity: 1; background-color: #33d; } .gray { order: 2; left: 50%; opacity: 0; background-color: #bbb; } .blue:focus + .gray { order: 1; left: 0; opacity: 1;} .blue:focus { order: 2; left: 50%; opacity: 0; } .gray:focus + .blue { order: 1; left: 0; opacity: 1; } .gray:focus { order: 2; left: 50%; opacity: 0; } .blue::after { content: 'Hello'; color: #fff; } .gray::after { content: 'Close'; color: #333; } 

 <div class="wrap"> <div class="blue" tabindex="1"></div> <div class="gray" tabindex="2"></div> </div> 

---

Gotchas:

Once the focus changes from the default, and related properties are changed; then losing focus will reset the elements back to their defaults. This effectively means that you no longer necessarily need to click the gray div to reset. You can click anywhere on the document and the states will reset.

Learning:

Although this achieves what you want, ie no anchors, no inputs, no checkboxes, no JavaScript etc., this won't take you far, and serves no meaningful purpose other than to just show that it can be done somehow. Use the tools which are meant for the specific purpose.