Показать и скрывать что-то с помощью чистого CSS с помощью кнопки show and hide

Question

Это должно быть довольно простым и прямым, но я не могу понять, что это правильно, и то, что я пытаюсь сделать, довольно специфично.

С чистым CSS Я хочу скрыть панель, нажав на кнопку «Скрыть», затем я хочу показать ее, нажав кнопку «показать». Вещь, когда я нажимаю кнопку скрыть, эта кнопка также скрывается, и появляется кнопка «показать». Затем, когда я нажимаю кнопку «Показать», кнопка show исчезнет, ​​и кнопка скрытия появится на своем месте.

Как сейчас, кнопка «скрыть» не скрывается, и я понятия не имею, что я делаю неправильно. Вот code with example HTML

CSS:

.panel .hideButton { 
    display: block; 
} 

.showButton{ 
    display: none; 
} 

.hide:focus ~ .panel{ 
    display: none; 
} 
.hide:focus ~ .hideButton { 
    display: none; 
} 
.hide:focus ~ .showButton { 
    display: block; 
} 

.show:focus ~ .panel { 
    display: block; 
} 
.show:focus ~ .hideButton { 
    display: block; 
} 
.show:focus ~ .showButton { 
    display: none; 
} 

HTML:

<div style="border:dotted 1px"> 
    Title 
    <a href="#" class="hide hideButton">hide</a> 
    <a href="#" class="show showButton">show</a> 
    <div class="panel" > 
    <hr style="border-top: dotted 1px;" /> 
     Something in here</div> 
</div> 

Answer 1

https://jsfiddle.net/ab08s7k6/

#cont { 
 
    display: none; 
 
} 
 
#show:target #cont { 
 
    display: inline-block; 
 
} 
 
#show:target #show { 
 
    display: none;

<div id="show"> 
 
    <a href="#show" id="show">Open</a> 
 
    <div id="cont"> 
 
     Something in here 
 
     <a href="#hide" id="hide" >Close</a> 
 
    </div> 
 
</div>

Answer 2

Это проще, чем вы думаете

http://jsfiddle.net/6W7XD/1/

HTML

<span class="span3" tabindex="0">Hide Me</span> 
<span class="span2" tabindex="0">Show Me</span> 
<p class="alert" >Some alarming information here</p> 

CSS

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

Answer 3

Я не думаю, что это возможная причина, если вы установите display: none; в hideButton он не будет на :focus больше.

на самом деле он работает даже без них:

.show:focus ~ .panel { 
display: block; 
} 
.show:focus ~ .hideButton { 
display: block; 
} 
.show:focus ~ .showButton { 
display: none; 
} 

, потому что, как только вы нажмете на что-либо за пределами этого <a>, что скрывать не будет на :focus больше, что приведет к шоу элемента, чтобы исчезнуть в любом случае

Тхо вы можете установить, что шкура с position:absolute и top:-enoughpx и не acttualy удалить, но она исчезнет с экрана