Показать другой элемент при щелчке по тексту или сделать: отображение фокуса после потери фокуса

Question

Моя цель - сделать тег p с помощью show класс, который отображается при отображении span (с текстом «Показать текст»). Я попытался сделать это, используя псевдоселектор :focus, но используя этот метод делает тег p отображаться только до щелчка по нему, где тег p снова скрывается.

Есть ли способ сделать селекторный дисплей :focus даже после щелчка (или) есть ли другой/лучший способ (без использования JS), чтобы отобразить p, когда нажата кнопка «Показать меня», и сделайте так, чтобы после нажатия снаружи?

Fiddle Demo

HTML КОД

<span class="span1" tabindex="0">Show Me</span> 
<p class="show" >This will show on click</p> 

CSS КОД

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

Answer 1

:focus псевдо-класса не будет работать, потому что, как именование указывает, что это применимо только тогда, когда в центре внимания на элементе, и нет никакого способа сделать фокус «палкой» даже после того, как мы щелкнем в другом месте.

Альтернативный способ достижения этого будет заключаться в использовании псевдо-класса/селектора :target^[1]. Это сделало бы отображение p всякий раз, когда будет нажата ссылка, так как это считается «целью».

body { 
 
    display: block; 
 
} 
 
.show { 
 
    display: none; 
 
} 
 
#content:target { 
 
    display: block; 
 
}

<a class="span1" href='#content'>Show Me</a> 
 

 
<p class="show" id='content'>This will show on click</p>

---

^[1] - :target селектор не поддерживается IE < = 8.