asp.net invoke "target" pseudo css class - html

Question

I have an html accordion that is essentially a bunch of tags with some css
A section then gets styled as being active through the :target pseudo class.
problem being, any server controls that cause a postback, then we loose the the selected section.
I was thinking to try add something so make my run on the server, and inject a class name, but I am not sure how to tell it to be active.
I have also tried setting the focus
example:
<div class="accordion vertical">
<section id="Section1">
<h2>LALALA LALa</h2>
<asp:Button ID="Button1" runat="server" Text="Button" />
</section>
<section id="Section2">
<h2>ZZZZZZZZZZZZZZZz</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</section>
</div>
css:
.accordion {
width:300px;
height:650px;
overflow:hidden;
color:#474747;
background:#fff;
padding:10px;
text-align: center;
}
.accordion section{
float:left;
overflow:hidden;
color:#333;
cursor:pointer;
margin:3px;
}
.accordion section:hover {
background:#ececec;
}
.accordion section p {
width: 92%;
display:none;
text-align: left;
}
.accordion section:after{
position:relative;
font-size:24px;
color:#000;
font-weight:bold;
}
.accordion section:nth-child(1):after{ content:'1'; }
.accordion section:nth-child(2):after{ content:'2'; }
.accordion section:nth-child(3):after{ content:'3'; }
.accordion section:nth-child(4):after{ content:'4'; }
.accordion section:nth-child(5):after{ content:'5'; }
.accordion section:target {
width: 92%;
background: #f3fbe5;
padding:10px;
}
.accordion section:target:hover {
background: #f3fbe5;
}
.accordion section:target h2 {
width:100%;
color:#fff;
}
.accordion section:target h2 a{
color:#333;
padding:0;
font-weight: 700;
}
.accordion section:target p {
width: 90%;
display:block;
}
.accordion section h2 a{
padding:15px 10px;
display:block;
font-size:16px;
font-weight:normal;
color:#000;
text-decoration:none;
font-family: MyraidProReg;
}
.vertical section{
width:100%;
height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{
height:250px;
width:97%;
}
.vertical section h2 {
position:relative;
}
/*Set position of the number on the slide*/
.vertical section:after{
top:-60px;
left:250px;
}
.vertical section:target:after{
left:-9999px;
}

Answer 1

I managed to solve this one. just putting down my solution here incase someone needs it (or I get hit by a car and develop amnesia and need to resolve this in the future - hello future crudler).
Ok the problem isnt linked to either the accordian, or the controls underneath. The root cause is that a postback doesnt preserve the hashtag location.
So you can either do some funny stuff with the form's action, or catch the post back (on each control) and then set a startupscript as such
Page.ClientScript.RegisterStartupScript(this.GetType(), "anchor", "#Section2", true);
or if you are using a update panel to be nice and ajaxy (named pnl in my case)
ScriptManager.RegisterStartupScript(pnl, pnl.GetType(), "anchor", "#Section2", true);
you can then do some sneaky things like put the # name as one of your html tags, strip it out on the post back and make your method more generic