To achieve the show/hide functionality using basic HTML structures, you can replicate JavaScript implementations with the following methods:
Method 1 - Using :target:
HTML structure:
<nav id="nav">
<h2>This serves as the 'navigation' element.</h2>
</nav>
<a href="#nav">show navigation</a>
<a href="#">hide navigation</a>
CSS style:
nav {
height: 0;
overflow: hidden;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
nav:target {
height: 4em;
color: #000;
background-color: #ffa;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
Check out the JS Fiddle demo.
Method 2 - Using :checked:
HTML structure:
<input type="checkbox" id="switch" />
<nav>
<h2>This serves as the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>
CSS style:
#switch {
display: none;
}
#switch + nav {
height: 0;
overflow: hidden;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#switch:checked + nav {
height: 4em;
color: #000;
background-color: #ffa;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
label {
cursor: pointer;
}
View the JS Fiddle demo.
Unfortunately, CSS does not have a ':clicked' selector, but alternatives like :active or :focus pseudo-classes can be used.
For updated demos to toggle the text of the label using CSS generated content, view this example:
#switch {
display: none;
}
#switch + nav {
height: 0;
overflow: hidden;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
#switch:checked + nav {
height: 4em;
color: #000;
background-color: #ffa;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
label {
display: inline-block;
cursor: pointer;
}
#switch ~ label::before {
content: 'Show ';
}
#switch:checked ~ label::before {
content: 'Hide ';
}
View the updated JS Fiddle demo.
References: