I know it's an old post but what about this solution (I've made a JSFiddle to illustrate it)... Solution that uses the :after
pseudo elements of <span>
to show/hide the <span>
switch link itself (in addition to the .alert
message it must show/hide). When the pseudo element loses it's focus, the message is hidden.
The initial situation is a hidden message that appears when the <span>
with the :after content : "Show Me";
is focused. When this <span>
is focused, it's :after content
becomes empty while the :after content
of the second <span>
(that was initially empty) turns to "Hide Me". So, when you click this second <span>
the first one loses it's focus and the situation comes back to it's initial state.
I started on the solution offered by @Vector I kept the DOM'situation presented ky @Frederic Kizar
HTML:
<span class="span3" tabindex="0"></span>
<span class="span2" tabindex="0"></span>
<p class="alert" >Some message to show here</p>
CSS:
body {
display: inline-block;
}
.span3 ~ .span2:after{
content:"";
}
.span3:focus ~ .alert {
display:block;
}
.span3:focus ~ .span2:after {
content:"Hide Me";
}
.span3:after {
content: "Show Me";
}
.span3:focus:after {
content: "";
}
.alert {
display:none;
}