I have a fairly long html form that I have split into sections with a jQuery accordian to hopefully make it more user-friendly.
The top section is open initially. When I scroll down to select the next heading and open up section #2, the focus stays at the bottom, so I have to scroll back up to the top of section #2.
How do I get the focus to be always at the top of a section when I first open it up?
My html for each section is basically structured like this -
<div class="accordian-container">
<div class="accordian-header">
<h2>Heading</h2>
<p>comment</p>
</div>
<div class="accordian-content">
<p>Some fieldsets and form elements go here</p>
</div>
</div>
My css for this:
.accordian-header {
cursor: pointer;
}
.active-header {
margin: 20px 0;
background: #D0D0D0;
border: #aaa;
padding: 10px;
}
.active-header:hover {
margin: 20px 0;
background: #ddd;
border: #aaa;
padding: 10px;
}
.inactive-header {
margin: 20px 0;
background: #ddd;
border: #aaa;
padding: 10px;
}
.inactive-header:hover {
margin: 20px 0;
background: #D0D0D0;
border: #aaa;
padding: 10px;
}
.accordian-content {
display: none;
}
and my javascript (
/*!
* Vallenato 1.0
* A Simple JQuery Accordion
*
* Designed by Switchroyale
*
* Use Vallenato for whatever you want, enjoy!
*/
$(document).ready(function()
{
//Add Inactive Class To All Accordian Headers
$('.accordian-header').toggleClass('inactive-header');
//Set The Accordian Content Width
var contentwidth = $('.accordian-header').width();
$('.accordian-content').css({'width' : contentwidth });
//Open The First Accordion Section When Page Loads
$('.accordian-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordian-content').first().slideDown().toggleClass('open-content');
// The accordian Effect
$('.accordian-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});