Скрыть/показать с помощью CSS не отображает содержимое в Chrome

Question

Я был бы очень признателен, если бы кто-то мог мне помочь. Я изо всех сил пытаюсь найти ответ.

У меня возникли проблемы с созданием этого шоу/скрыть код в Chrome. Содержимое не отображается при нажатии. Он отлично работает в IE и Firefox.

Fiddle

.hide {display: none; 
} 
#list {display: none; 
} 
    .show:focus { display: none; 
} 
    .show:focus + .hide {display: inline; 
} 
    .show:focus ~#list{ display:block; 
} 






<a href="#" class="show" tabindex="2">show</a> 
      <a href="#" class="hide" tabindex="1">hide</a>  
<div id="list"> 
     Content here 
    </div> 

Answer 1

Попробуйте это, должно работать нормально.

 <span class="span3" tabindex="0">Hide Me</span> 
     <span class="span2" tabindex="0">Show Me</span> 
     <p class="content" >My content here</p> 

CSS

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