Using CSS3 Target without Causing Routing Issue in Backbone

Question

I am using a CSS target for some basic animation in Backbone. They issue is that the method I am currently using appends a #banner to the URL, which Backbone will try to interpret as a route if users refresh the page after click the trigger to begin the animation. Any clues on how I can manage this so that I can have my CSS actions occur on click?

Here is my HTML:

<section id="banner">
    <span id="bannerexpand"></span>
    <a href="#banner" id="click">Click Me</a>
    <span id="bannerhidden"></span>
</section>

Here is my CSS:

#banner {
    height: 70px;
    background-color: #CCCCCC;
}

#banner:target {
    height: 140px;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    -ms-transition: 1s ease;
    transition: 1s ease;
}

#bannerhidden {
    display: none;
}

#banner:target #click {
    display: none;
}

#banner:target #bannerhidden {
    display: block;
    background-color: #CCCCCC;
}

Answer 1

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.