1 Replies - 640 Views - Last Post: 09 January 2017 - 04:20 AM

#1 [email protected]  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 58
  • Joined: 23-March 11

Link to a specific tab in an accordion

Posted 09 January 2017 - 03:46 AM

I am using an excellent jquery accordion plug-in which uses some advanced coding.
I would like to be able to link to the accordion page by clicking on links in other
pages and have the accordion open the relevant tab. I tried adding an anchor to an
item in the accordion then creating a hyperlink with the named anchor
accordionpage.html#anchore
however this only links to the page containing the accordion (no tab open)

This is the accordion code -

(function( $ ) {

    $.fn.rlAccordion = function(method, options) {
        var settings = $.extend({
            rlAccordion: 'rlAccordion', // add class in the same level of a parent statement for avoid styles conflict
            signTag: '<span></span>',   // html tag parent signs
            titles: 'h3',               // html tag parent of minus and plus, this may replaced also for a class
            titlesChild: 'span',        // html child titles and parent signs
            container: 'div',           // html tag adjacent sibling of titles
            childNumOptions: true,      // Active childNum option
            childNum: 0,                // number of the children start open
            classOpen: 'opened',        // add class to the titles option adjacent sibling
            open: '&#x2b;',             // unicode plus sign
            close: '&#x2212;',          // unicode minus sign
            rlOpen: 'rl-open',          // class for a plus sign
            rlClose: 'rl-close'         // class for a minus sign
        }, options);

        var $element = $(this).children(settings.titles), // limit the scope
            $symbols = $(settings.signTag),               // create a html tag
            $signOpen = $symbols.html(settings.open),     // insert a unicode open sign into the parent
            $signClose = $symbols.html(settings.close),   // insert a unicode close sign into the parent
            $insertElement = $symbols.appendTo($element); // insert symbols signs into titles settings

        // add class in the same level of a parent statement for avoid styles conflict
        $element
            .parent()
            .addClass(settings.rlAccordion);

        // parse code to assign the corresponding unicode and class
        if ($element.next().hasClass(settings.classOpen)) {
            $element
                .children()
                .html(settings.close)
                .addClass(settings.rlClose);
        }
        else {
            $element
                .children()
                .html(settings.open)
                .addClass(settings.rlOpen);
        }

        var methods = {

            init: function() { // defaults settings

                return this.each(function() {

                    if (settings.childNumOptions === true) {

                        $(this)
                            .children(settings.container)
                            .eq(settings.childNum)
                            .addClass(settings.classOpen)
                            .slideDown()
                            .prev()
                            .children()
                            .html(settings.close)
                            .removeClass(settings.rlOpen)
                            .addClass(settings.rlClose); // assign the children start open
                    }

                    $element.on('click', function() {
                        $(this)
                            .parent()
                            .children(settings.container)
                            .removeClass(settings.classOpen)
                            .slideUp();
                        $(this)
                            .parent()
                            .children(settings.titles)
                            .children()
                            .html(settings.open);
                        $(this)
                            .next()
                            .addClass(settings.classOpen)
                            .slideDown();

                        if ($(this).children().hasClass(settings.rlClose)) {
                            $(this)
                                .next()
                                .stop();
                        }

                        if ($(this).next().hasClass(settings.classOpen)) {
                            $(this)
                                .parent()
                                .find(settings.titles)
                                .children()
                                .removeClass(settings.rlClose)
                                .addClass(settings.rlOpen);

                            $(this)
                                .children()
                                .html(settings.close)
                                .removeClass(settings.rlOpen)
                                .addClass(settings.rlClose);
                        }

                        else {
                            $(this)
                                .children()
                                .html(settings.open)
                                .removeClass(settings.rlClose)
                                .addClass(settings.rlOpen);
                        }
                    });

                });

            },

            single: function() {

                return this.each(function() {

                    if (settings.childNumOptions === true) {

                        $(this)
                            .children(settings.container)
                            .eq(settings.childNum)
                            .addClass(settings.classOpen)
                            .slideDown()
                            .prev()
                            .children()
                            .html(settings.close)
                            .removeClass(settings.rlOpen)
                            .addClass(settings.rlClose); // assign the children start open
                    }

                    $element.on('click', function() {
                        $(this)
                            .next()
                            .slideToggle()
                            .toggleClass(settings.classOpen);

                        if ($(this).next().hasClass(settings.classOpen)) {
                            $(this)
                                .children()
                                .html(settings.close)
                                .removeClass(settings.rlOpen)
                                .addClass(settings.rlClose);
                        }

                        else {
                            $(this)
                                .children()
                                .html(settings.open)
                                .removeClass(settings.rlClose)
                                .addClass(settings.rlOpen);
                        }
                    });

                });

            },

            mix: function() {

                return this.each(function() {

                    if (settings.childNumOptions === true) {

                        $(this)
                            .children(settings.container)
                            .eq(settings.childNum)
                            .addClass(settings.classOpen)
                            .slideDown()
                            .prev()
                            .children()
                            .html(settings.close)
                            .removeClass(settings.rlOpen)
                            .addClass(settings.rlClose); // assign the children start open
                    }

                    $element.on('click', function() {
                        if ($(this).next().hasClass(settings.classOpen)) {
                            $(this)
                                .parent()
                                .children(settings.container)
                                .removeClass(settings.classOpen)
                                .slideUp();
                            $(this)
                                .parent()
                                .children(settings.titles)
                                .children()
                                .html(settings.open)
                                .removeClass(settings.rlClose)
                                .addClass(settings.rlOpen);
                            $(this)
                                .children()
                                .html(settings.open);
                        }

                        else {
                            $(this)
                                .parent()
                                .children(settings.container)
                                .removeClass(settings.classOpen)
                                .slideUp();
                            $(this)
                                .next()
                                .addClass(settings.classOpen)
                                .slideDown();
                            $(this)
                                .parent()
                                .children(settings.titles)
                                .children()
                                .html(settings.open)
                                .removeClass(settings.rlClose)
                                .addClass(settings.rlOpen);
                            $(this)
                                .children()
                                .html(settings.close)
                                .removeClass(settings.rlOpen)
                                .addClass(settings.rlClose);
                        }
                    });

                });

            }

        };

        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.rlAccordion ' );
        }
    };

})( jQuery );


Is This A Good Question/Topic? 0
  • +

Replies To: Link to a specific tab in an accordion

#2 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,904
  • Joined: 12-December 12

Re: Link to a specific tab in an accordion

Posted 09 January 2017 - 04:20 AM

Does the documentation for your plug-in indicate that it might use the anchor in the url to activate a tab?

If not, then find the piece of code in the documentation that would activate a tab. Then, when the page loads, extract the anchor from the url (assuming there is one) (window.location.hash) and use this value within the code that activates a tab.



I suppose it would also be possible to dynamically add a class-name or attribute to the relevant tab (that causes it to be active) as the page is constructed, but the first suggested approach is probably cleaner. That is, let the page load then activate the relevant tab.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1