Jquery Accordian - want to always start at top of section

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;
});

Give this a shot:

$(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(400, scrollToHeading).toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle(400, scrollToHeading).toggleClass('open-content');
        }
    });

    return false;
});

/**
 * Scrolls to the heading
 */
function scrollToHeading(){
    $('html, body').animate({
        scrollTop: $('.active-header').first().offset().top
    })
}

Here’s what I did:

  • Created a function, scrollToHeading() that does the scrolling
  • Added 400, scrollToHeading as arguments to your slideToggles(). The 400 is just the default speed.

I tried it and it worked like a charm. Thank you!

On second thought, the page seems to whiz up to the top and the action could get a bit hard on the eyes, if a person had to use this form to many times. Is there anyway to adjust the code so that it just jumps back up to the top (sort of like a page refresh) instead of scrolling quickly?

I tried adjusting the 400 (a smaller value means it takes less time, therefore is faster, right?). That still was hard on the eyes.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.