I'm using twitter bootstrap accordion with links pointing to different pages.
ex:
<div class="accordion-group">
<div class="accordion-heading">
<a href="#acc1" class="accordion-toggle" data-parent="#side_accordion" data-toggle="collapse">
<i class="icon-folder-close"></i>
Profile
</a>
</div>
<div class="accordion-body collapse" id="acc1">
<div class="accordion-inner ">
<ul class="nav nav-list" >
<li class="active"><a href="addprofile.html" >Add Profile</a></li>
<li><a href="updateprofile.html" >Update Profile</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a href="#acc2" class="accordion-toggle" data-parent="#side_accordion" data-toggle="collapse">
<i class="icon-file"></i>
Photo
</a>
</div>
<div class="accordion-body collapse" id="acc2">
<div class="accordion-inner">
<ul class="nav nav-list">
<li><a href="addphoto" >Add Photo</a></li>
<li><a href="updatephoto">Update Photo</a></li>
</ul>
</div>
</div>
</div>
Now when i click on some item, it is redirected to the page but state of accordion is lost.
Any idea on how i can preserve the state of accordion. When i click on 'Add photo' and that is opened i want the photos accordion to be opened and 'Add Photo' with dark background.
I'm using PHP for server side code.