Question

I’m trying to develop my own horizontal accordion without having to use a plugin. It should take up the full browser-window width. The accordion sections open on mouseenter.

It’s more-or-less working (providing the section is allowed to expand fully before hovering over another one), however, if the sections are hovered over quickly the entire width of the accordion shrinks as the ‘selected’ section takes longer to grow than the smaller section.

I need to make the accordion maintain the 100% browser-width, but I’m not sure what I need to be doing to achieve this.

I have created a jsFiddle to illustrate (http://jsfiddle.net/AUu9E/), run the mouse across them quickly to see the problem I’m trying to solve.

Many thanks in advance.

var qtySect = 6;
var windowWidth = $(window).width();
var selectedWidth = windowWidth * 0.7;
var unselectedWidth = windowWidth * 0.3 / (qtySect - 1);
$("nav ul li").fadeTo(0,0.6);
    //set initial widths
$(".unselected").css("width", unselectedWidth);
$(".liHome").css("width",selectedWidth).addClass("selected");
    //mouseover animate
$("nav ul li").mouseenter(function() {
    if ($(this).hasClass("unselected")){
            $(this).animate( { width: selectedWidth }, { queue: false, duration: 1000, easing: "linear" } )
        $(".selected").animate( { width: unselectedWidth }, { queue: false, duration: 1000, easing: "linear" } );
        $(".selected").addClass("unselected").removeClass("selected");
        $(this).addClass("selected").removeClass("unselected");
    }
});

Answer 1

Hmmm, couldn’t you use percentages instead? Seems to eliminate alot of code 🙂

It seems you need to use a “STEP” proccess, to make sure they follow each other.
Example of such can be found here http://www.protofunc.com/scripts/jquery/animate-step/

http://jsfiddle.net/AUu9E/3/

HTML

<nav>
            <ul>
                <li class="liHome">home</li>
                <li class="liRsvp">rsvp</li>
                <li class="liStory">story</li>
                <li class="liVenue">venue</li>
                <li class="liGuestbook">guestbook</li>
                <li class="liGallery">gallery</li>
            </ul>
</nav>

JS

//Remove 1 element(selected), and find the width of the rest(unselected)
var qtySect = 6-1;
var unselectedWidth = 40 / qtySect +"%";
var selectedWidth = 60+"%";

    //set initial widths
$("nav ul li:first-child").addClass('selected');
$("nav ul li").not(':first-child').addClass('unselected');
$(".unselected").css("width", unselectedWidth);
$(".selected").css("width",selectedWidth);
    //mouseover animate
$("nav ul li").mouseenter(function() {
    if ($(this).hasClass("unselected")){
         $(this).animate( { width: selectedWidth }, { queue: false, duration: 1000, easing: "linear" } )
         $(".selected").animate( { width: unselectedWidth }, { queue: false, duration: 1000, easing: "linear" } );
        $(".selected").addClass("unselected").removeClass("selected");
        $(this).addClass("selected").removeClass("unselected");
    }
});