This should be handled via javaScript if you want to avoid the :target
method.
Else , in CSS and in a non semantic manner, you can use a form
element to trigger a :checked
state : DEMO
HTML updated :
<input type="checkbox" id="hdshw"/><section id="banner" tabindex="0">
<span id="bannerexpand"></span>
<label id="click" for="hdshw">Click Me</label>
<span id="bannerhidden" ></span>
</section>
And CSS used :
#banner {
height: 70px;
background-color: #CCCCCC;
}
:checked ~ #banner {
height: 140px;
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-o-transition: 1s ease;
-ms-transition: 1s ease;
transition: 1s ease;
}
#bannerhidden,
#hdshw{/* hide the checkbox */
display: none;
}
:checked ~ #banner #click {
display: none;
}
:checked ~ #banner #bannerhidden {
display: block;
background-color: #CCCCCC;
}
This is not bullet proof for older browser.