Simulate continuity of a section menu highlight item

Simulate continuity of a section menu highlight item

Hello,
I'm trying to simulate the continuity of a section by keeping the parent li highlighted in my menu. For that, I put the child when there is one as hidden. In my Jquery code, I managed to do what I want for the fist item but for the others it doesn't work and my buttons next and previous stay blocked. Do you have any idea how to resolve my problem.
HERE MY FIDDLE

My HTML looks like this :
  1. <div id="cssmenu">
  2.     <ul id="list">
  3.         <li id="item1"><a href="#home">Home</a></li>
  4.         <ul class="hide">
  5.             <li><a href="#home2"></a></li></ul>
  6.         <li id="item3"><a href="#newsletter">Newsletter</a></li>

For my Jquery code I did something like that :

  1. $('#cssmenu').find('li').click(function(){
       //removing the previous selected menu state
       $('#cssmenu').find('li.active').removeClass('active');

        //is this element from the second level menu?
        if($(this).closest('ul').hasClass('hide')){
             $(this).parents('li').addClass('active');

        //this is a parent element
        }else{
             $(this).addClass('active');
        }
    });











  2. $(function () {
            var
                animation = function ( href ) {
                    var
                        name = "active",
                        element = $( "a[href='" + href + "']" );
                   
                    $( "html, body" ).stop().animate( {
                        scrollLeft: $( href ).offset().left
                    }, 1200 );
                   
                    element.closest( "ul" ).find( "li" ).removeClass( name );
                    element.parent().addClass( name );
                },
                menu = $( "#list" );
               
            animation( menu.find( "li" ).eq( 0 ).find( "> a" ).attr( "href" ) );
           
            $( "#cssmenu a" ).bind( "click", function( event ) {
                var target = $( this ).attr("href");
               
                animation( target );
               
                event.preventDefault();
            } );
           
            $( "#next, #prev" ).click( function ( event ) {
                var
                    positionActiveClass = menu.find( "> li.active" ).index(),
                    menuLength = menu.find( "> li" ).length - 1,
                    buttonId = $( this ).attr( "id" );
               
                if ( buttonId === "next" ) {
                    if ( positionActiveClass === ( menuLength ) ) {
                        newElementActiveClass = menu.find( "li" ).eq( 0 );
                        newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
                       
                        animation( newPositionActiveClass );
                    } else {
                        newElementActiveClass = menu.find( "li" ).eq( positionActiveClass + 1 );
                        newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
                       
                        animation( newPositionActiveClass );
                    }
                } else {
                    if ( positionActiveClass === 0 ) {
                        newElementActiveClass = menu.find( "li" ).eq( menuLength );
                        newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
                       
                        animation( newPositionActiveClass );
                    } else {
                        newElementActiveClass = menu.find( "li" ).eq( positionActiveClass - 1 );
                        newPositionActiveClass = newElementActiveClass.find( "> a" ).attr( "href" );
                       
                        animation( newPositionActiveClass );
                    }
                }
               
                event.preventDefault();
            } );
           
        } );