Show and Hide div element with pure CSS and HTML on click

Question

I'd like to create a program where in: * When you click Span 1, Span 2 will be displayed and Span 1 will be disabled. * When you click Span 2, Span 1 will be displayed and Span 2 will be disabled.

This is my codes and I think it's strange. Your help is greatly appreciated.

CSS

body {
  display: block;
}
.span1:focus ~ .span2 {
  display: none;
}
.span2:focus ~ .span1 {
  display: block;
}

HTML

<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>

correct code is `.span1:focus ~ .alert { display: none; }` – Navoneel Talukdar Jan 09 '16 at 09:22 — Navoneel Talukdar, Jan 09 '16 at 09:22

score 0 · Answer 1 · answered Jan 09 '16 at 11:12

Use this css below:

body {
    display: block;
}
.span1:focus{
    color:gray;
}
.span2{
  color:gray;
}
.span1:focus ~ .span2 {
    display: inline-block;
    color:black;
}
.span2:focus{
    color:gray; 
}
.span2:focus ~ .span1 {
    color:black
}

Check the jsfiddle demo

score 0 · Answer 2 · answered Jan 09 '16 at 11:23

This problem can not be solved by Pure CSS and HTML , the answer can be found by javascript.

<span class="span1" tabindex="0" onclick="span1Clciked()">Span 1</span>
<span class="span2" tabindex="0" onclick="span2Clicked()">Span 2</span>

and on javascript

<script>
function span1Clicked(){
    var x = document.getElementsByClassName("span2").item(0);
    x.style.visibility='hidden';
 // other stuff

}
function span2Clicked(){
    var x = document.getElementsByClassName("span1").item(0);
    x.style.visibility='hidden';
 // other stuff

}    
</script>

score 0 · Answer 3 · answered Jan 09 '16 at 11:44

Could be accomplished easily and with more flexibility in JavaScript. Example in jQuery:

$('span').click(function() {
  $(this).css('visibility','hidden').siblings().css('visibility','visible');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>

Show and Hide div element with pure CSS and HTML on click

3 Answers3