none
Get/Set the index of the last opened li using jquery after postback RRS feed

  • Question

  • I am using an accordion and trying to achieve the below:

    Every time there is a post back, display/expand the last opened/active li that was shown before. At the moment, the page is refreshed and go back to its initial stage (all li closed). Is it possible to achieve this ?

    I tried different things but without success e.g. I tried to save the last opened/active li index into a hidden aspx text box but it didn't work. Also, I tried to save the index in a cookie but again without success.

    $('#st-accordion').accordion({
                        open: -1
                    });

    Can I replace the -1 with a dynamic way of getting the index of the last opened li without losing it after post back ? In addition, how can I handle situations that more than one li were opened/expanded.

    Any ideas would be much appreciated.

    <link rel="stylesheet" type="text/css" href="../Content/style.css" />
        <script type="text/javascript" src="../Scripts/jquery.accordion.js">
        </script>
        <script type="text/javascript" src="../Scripts/jquery.easing.1.3.js"></script>
    
    <asp:UpdatePanel ID="UpdatePanelForm" runat="server">
        <ContentTemplate>
            <h2><asp:Label ID="TitleLbl" runat="server" Text=""></asp:Label></h2>
    
            <div class="wrapper">
                <div id="st-accordion" class="st-accordion">
                    <ul>
                        <li>
                            <a href="#">Section 1<span class="st-arrow" /></a>
                            <div class="st-content">
                                Content 1
                            </div>
                        </li>
                        <li>
                            <a href="#">Section 2<span class="st-arrow" /></a>
                            <div class="st-content">
                                 Content 2
                            </div>
                        </li>
                        <li>
                            <a href="#">Section 3<span class="st-arrow" /></a>
                            <div class="st-content">
        <asp:LinkButton ID="LinkButtonEdit" OnClick="LinkButtonEdit_Click" CommandName="Select" runat="server">Edit</asp:LinkButton>
    
                            </div>
                        </li>
                    </ul>
                </div>
            </div> 
        </ContentTemplate>
    </asp:UpdatePanel>
    
    
        <script type="text/javascript">
            function pageLoad(sender, args) {
                $(document).ready(function () {
    
                    $('#st-accordion').accordion({
                        open: -1
                    });
    
                });
            }
        </script>
    
    (function (window, $, undefined) {
    
        /*
        * smartresize: debounced resize event for jQuery
        *
        *
        * Copyright 2011 @louis_remi
        * Licensed under the MIT license.
        */
    
        var $event = $.event, resizeTimeout;
    
        $event.special.smartresize  = {
            setup: function() {
                $(this).bind( "resize", $event.special.smartresize.handler );
            },
            teardown: function() {
                $(this).unbind( "resize", $event.special.smartresize.handler );
            },
            handler: function( event, execAsap ) {
                // Save the context
                var context = this,
                    args    = arguments;
    
                // set correct event type
                event.type = "smartresize";
    
                if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
                resizeTimeout = setTimeout(function() {
                    jQuery.event.handle.apply( context, args );
                }, execAsap === "execAsap"? 0 : 100 );
            }
        };
    
        $.fn.smartresize            = function( fn ) {
            return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
        };
    
        $.Accordion                 = function( options, element ) {
    
            this.$el            = $( element );
            // list items
            this.$items         = this.$el.children('ul').children('li');
            // total number of items
            this.itemsCount     = this.$items.length;
    
            // initialize accordion
            this._init( options );
    
        };
    
        $.Accordion.defaults        = {
            // index of opened item. -1 means all are closed by default.
            open            : -1,
            // if set to true, only one item can be opened. Once one item is opened, any other that is opened will be closed first
            oneOpenedItem   : false,
            // speed of the open / close item animation
            speed           : 600,
            // easing of the open / close item animation
            easing          : 'easeInOutExpo',
            // speed of the scroll to action animation
            scrollSpeed     : 900,
            // easing of the scroll to action animation
            scrollEasing: 'easeInOutExpo'
        };
    
        $.Accordion.prototype       = {
            _init               : function( options ) {
    
                this.options        = $.extend( true, {}, $.Accordion.defaults, options );
    
                // validate options
                this._validate();
    
                // current is the index of the opened item
                this.current        = this.options.open;
    
                // hide the contents so we can fade it in afterwards
                this.$items.find('div.st-content').hide();
    
                // save original height and top of each item    
                this._saveDimValues();
    
                // if we want a default opened item...
                if( this.current != -1 )
                    this._toggleItem( this.$items.eq( this.current ) );
    
                // initialize the events
                this._initEvents();
    
            },
            _saveDimValues      : function() {
    
                this.$items.each( function() {
    
                    var $item       = $(this);
    
                    $item.data({
                        originalHeight  : $item.find('a:first').height(),
                        offsetTop       : $item.offset().top
                    });
    
                });
    
            },
            // validate options
            _validate           : function() {
    
                // open must be between -1 and total number of items, otherwise we set it to -1
                if( this.options.open < -1 || this.options.open > this.itemsCount - 1 )
                    this.options.open = -1;
    
            },
            _initEvents         : function() {
    
                var instance    = this;
    
                // open / close item
                this.$items.find('a:first').bind('click.accordion', function( event ) {
    
                    var $item           = $(this).parent();
    
                    // close any opened item if oneOpenedItem is true
                    if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) {
    
                        instance._toggleItem( instance.$items.eq( instance.current ) );
    
                    }
    
                    // open / close item
                    instance._toggleItem( $item );
    
                    return false;
    
                });
    
                $(window).bind('smartresize.accordion', function( event ) {
    
                    // reset orinal item values
                    instance._saveDimValues();
    
                    // reset the content's height of any item that is currently opened
                    instance.$el.find('li.st-open').each( function() {
    
                        var $this   = $(this);
                        $this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );
    
                    });
    
                    // scroll to current
                    //if( instance._isOpened() )
                        //instance._scroll();
                });
    
            },
            // checks if there is any opened item
            _isOpened           : function() {
    
                return ( this.$el.find('li.st-open').length > 0 );
    
            },
            // open / close item
            _toggleItem         : function( $item ) {
    
                var $content = $item.find('div.st-content');
    
                ( $item.hasClass( 'st-open' ) ) 
    
                    ? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({
                        height  : $item.data( 'originalHeight' )
                    }, this.options.speed, this.options.easing ) )
    
                    : ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({
                        height  : $item.data( 'originalHeight' ) + $content.outerHeight( true )
                    }, this.options.speed, this.options.easing ), this._scroll( this ) )
    
            },
            // scrolls to current item or last opened item if current is -1
            _scroll             : function( instance ) {
    
                var instance    = instance || this, current;
    
                ( instance.current !== -1 ) ? current = instance.current : current = instance.$el.find('li.st-open:last').index();
    
                $('html, body').stop().animate({
                    scrolltop   : ( instance.options.oneopeneditem ) ? instance.$items.eq( current ).data( 'offsettop' ) : instance.$items.eq( current ).offset().top
                }, instance.options.scrollspeed, instance.options.scrolleasing );
    
            }
        };
    
        var logError = function( message ) {
    
            if ( this.console ) {
    
                console.error( message );
    
            }
    
        };
    
        $.fn.accordion= function( options ) {
    
            if ( typeof options === 'string' ) {
    
                var args = Array.prototype.slice.call( arguments, 1 );
    
                this.each(function() {
    
                    var instance = $.data( this, 'accordion' );
    
                    if ( !instance ) {
                        logError( "cannot call methods on accordion prior to initialization; " +
                        "attempted to call method '" + options + "'" );
                        return;
                    }
    
                    if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                        logError( "no such method '" + options + "' for accordion instance" );
                        return;
                    }
    
                    instance[ options ].apply( instance, args );
    
                });
    
            } 
            else {
    
                this.each(function() {
                    var instance = $.data( this, 'accordion' );
                    if ( !instance ) {
                        $.data( this, 'accordion', new $.Accordion( options, this ) );
                    }
                });
    
            }
    
            return this;
    
        };
    
            })(window, jQuery);



    • Edited by michaalis Monday, August 5, 2019 8:04 AM
    Monday, August 5, 2019 8:02 AM