How to disable specific jquery accordion links

Question

I am currently implementing a jquery based accordion in the navigation section, but some parts of the navigation need not be part of the accordion (if there are no categories, etc.), I am just wondering if parts of the accordion can be disconnected or not?

I feel that this may not be possible, but this site surprised me before :)

Many thanks.

Answer 1

You can put classes in what you want to disable.

Then do:

jQuery(".toDisable").live("click", function (){return false;}); 

or something similar

Answer 2

The previous trick does not work due to the event binding order, but the following works:

 // Add the class ui-state-disabled to the headers that you want disabled $( ".whatyouwant" ).addClass("ui-state-disabled"); // Now the hack to implement the disabling functionality var accordion = $( "#accordion" ).data("accordion"); accordion._std_clickHandler = accordion._clickHandler; accordion._clickHandler = function( event, target ) { var clicked = $( event.currentTarget || target ); if (! clicked.hasClass("ui-state-disabled")) { this._std_clickHandler(event, target); } }; 

If you want to activate a tab, follow these steps:

 // Remove the class ui-state-disabled to the headers that you want to enable $( ".whatyouwant" ).removeClass("ui-state-disabled"); 

What he

Answer 3

The simplest way would be to use the unbind method:

  $ (". ui-state-disabled"). unbind ("click"); 

Adding ui-state-disabled to the elements you want to disable.

Answer 4

How for a home link? I wanted the main link to be “regularly” on top of my accordion. I am using version 1.8 for Google 1.8:

 < script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">< / script > 

With no restrictions:

 < script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js">< / script > 

I cracked the accordion a bit in the _clickHandler method (line 5834-ish). I added the following code immediately after "var clicked =":

 // this.headers.index == My First "Home" Accordion H3. if(this.headers.index(event.currentTarget) == 0){window.location='/support';return;} 

Answer 5

I added the linkDisabled option to the plugin. this way you can define a class for links inside the accordion object that are disabled. eg:.

 $(myAccordion).accordion({ linkDisabled: 'disabled' // note that the class is given without dot. eg not '.disabled', but 'disabled' }); 

and the plugin is rewritten here:

 /* --------------------------------------------- Nested Accordion v.1.4.7.3 Script to create 'accordion' functionality on a hierarchically structured content. http://www.adipalaz.com/experiments/jquery/nested_accordion.html Requires: jQuery v1.4.2+ Copyright (c) 2009 Adriana Palazova Dual licensed under the MIT (http://www.adipalaz.com/docs/mit-license.txt) and GPL (http://www.adipalaz.com/docs/gpl-license.txt) licenses. ------------------------------------------------ */ (function($) { //$.fn.orphans - http://www.mail-archive.com/[e-mail]/msg43851.html $.fn.orphans = function(){ var txt = []; this.each(function(){$.each(this.childNodes, function() { if (this.nodeType == 3 && $.trim(this.nodeValue)) txt.push(this)})}); return $(txt);}; $.fn.accordion = function(options) { var o = $.extend({}, $.fn.accordion.defaults, options); return this.each(function() { var containerID = o.container ? '#' + this.id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : '#' + this.id, El = Obj + ' ' + o.el, hTimeout = null; // build if (o.head) $(Obj).find(o.head).addClass('h'); if (o.head) { if ($(El).next('div:not(.outer)').length) {$(El).next('div:not(.outer)').wrap('<div class="outer" />');} $(Obj + ' .h').each(function(){ var $this = $(this); if (o.wrapper == 'div' && !$this.parent('div.new').length) {$this.add( $this.next('div.outer') ).wrapAll('<div class="new"></div>');} }); } $(El).each(function(){ var $node = $(this); if ($node.find(o.next).length || $node.next(o.next).length) { if ($node.find('> a').length) { $node.find('> a').addClass("trigger"); } else { var anchor = '<a class="trigger" href="#" />' if (o.elToWrap) { var $t = $node.orphans(), $s = $node.find(o.elToWrap); $t.add($s).wrapAll(anchor); } else { $node.orphans().wrap(anchor); } } } else { $node.addClass('last-child'); if (o.lastChild && $node.find('> a').length) {$node.find('> a').addClass("trigger");} } }); // init state $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shownd').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0); if (o.activeLink) { var loc, fullURL = window.location.href, path = window.location.pathname.split( '/' ), page = path[path.length-1]; (o.uri == 'full') ? loc = fullURL : loc = page; $(Obj + ' a:not([href $= "#"])[href$="' + loc + '"]').addClass('active').parent().attr('id', 'current').closest(o.obj).addClass('current'); if (o.shift && $(Obj + ' a.active').closest(o.wrapper).prev(o.wrapper).length) { var $currentWrap = $(Obj + ' a.active').closest(o.wrapper), $curentStack = $currentWrap.nextAll().andSelf(), $siblings = $currentWrap.siblings(o.wrapper), $first = $siblings.filter(":first"); if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) { $currentWrap.insertBefore($first).addClass('shownd').siblings(o.wrapper).removeClass('shownd'); } if (o.shift == 'all' && $siblings.length > 1) {$curentStack.insertBefore($first);} } } if (o.initShow) { $(Obj).find(o.initShow).show().addClass('shownd') .parents(Obj + ' ' + o.next).show().addClass('shownd').end() .parents(o.wrapper).find('> a.trigger, > ' + o.el + ' a.trigger').addClass('open').data('state', 1); if (o.expandSub) {$(Obj + ' ' + o.initShow).children(o.next).show().end().find('> a').addClass('open').data('state', 1 );} } // event if (o.event == 'click') { var ev = 'click'; } else { if (o.focus) {var f = ' focus';} else {var f = '';} var ev = 'mouseenter' + f; } var scrollElem; (typeof scrollableElement == 'function') ? (scrollElem = scrollableElement('html', 'body')) : (scrollElem = 'html, body'); // The event handler is bound to the "accordion" element // The event is filtered to only fire when an <a class="trigger"> was clicked on. $(Obj).delegate('a.trigger', ev, function(ev) { var $thislink = $(this), $thisLinkParent = $(this).parent(), $thisWrapper = $thislink.closest(o.wrapper), $nextEl = $thisWrapper.find('> ' + o.next), $siblings = $thisWrapper.siblings(o.wrapper), $trigger = $(El + ' a.trigger'), $shownEl = $thisWrapper.siblings(o.wrapper).find('>' + o.next + ':visible'), shownElOffset; $shownEl.length ? shownElOffset = $shownEl.offset().top : shownElOffset = false; function action(obj) { if (($nextEl).length && $thislink.data('state') && (o.collapsible)) { $thislink.removeClass('open'); $nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);}); } if (($nextEl.length && !$thislink.data('state')) || (!($nextEl).length && $thislink.closest(o.wrapper).not('.shownd'))) { if (!o.standardExpansible) { $siblings.find('> a.open, >'+ o.el + ' a.open').removeClass('open').data('state', 0).end() .find('> ' + o.next + ':visible')[o.hideMethod](o.hideSpeed); if (shownElOffset && shownElOffset < $(window).scrollTop()) {$(scrollElem).animate({scrollTop: shownElOffset}, o.scrollSpeed);} } $thislink.addClass('open'); $nextEl.filter(':hidden')[o.showMethod](o.showSpeed, function() {$thislink.data('state', 1);}); } if (o.shift && $thisWrapper.prev(o.wrapper).length) { var $thisStack = $thisWrapper.nextAll().andSelf(), $first = $siblings.filter(":first"); if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) { $thisWrapper.insertBefore($first).addClass('shownd').siblings(o.wrapper).removeClass('shownd'); } if (o.shift == 'all' && $siblings.length > 1) {$thisStack.insertBefore($first);} } } if (o.event == 'click') { if (!o.linkDisabled || !$thislink.hasClass(o.linkDisabled)) { action($trigger); } if ($thislink.is('[href $= "#"]')) { return false; } else { if ($.isFunction(o.retFunc)) { return o.retFunc($thislink) } else { return true; } } } if (o.event != 'click') { hTimeout = window.setTimeout(function() { if (!o.linkDisabled || !$thislink.hasClass(o.linkDisabled)) { action($trigger); } }, o.interval); $thislink.click(function() { $thislink.blur(); if ($thislink.attr('href')== '#') { $thislink.blur(); return false; } }); } }); if (o.event != 'click') {$(Obj).delegate('a.trigger', 'mouseleave', function() {window.clearTimeout(hTimeout); });} /* ----------------------------------------------- // http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links: -------------------------------------------------- */ function scrollableElement(els) { for (var i = 0, argLength = arguments.length; i < argLength; i++) { var el = arguments[i], $scrollElement = $(el); if ($scrollElement.scrollTop() > 0) { return el; } else { $scrollElement.scrollTop(1); var isScrollable = $scrollElement.scrollTop() > 0; $scrollElement.scrollTop(0); if (isScrollable) { return el; } } }; return []; }; /* ----------------------------------------------- */ });}; $.fn.accordion.defaults = { container : true, // {true} if the plugin is called on the closest named container, {false} if the pligin is called on the accordion element obj : 'ul', // the element which contains the accordion - 'ul', 'ol', 'div' objClass : '.accordion', // the class name of the accordion - required if you call the accordion on the container objID : '', // the ID of the accordion (optional) wrapper :'li', // the common parent of 'a.trigger' and 'o.next' - 'li', 'div' el : 'li', // the parent of 'a.trigger' - 'li', '.h' head : '', // the headings that are parents of 'a.trigger' (if any) next : 'ul', // the collapsible element - 'ul', 'ol', 'div' initShow : '', // the initially expanded section (optional) expandSub : true, // {true} forces the sub-content under the 'current' item to be expanded on page load showMethod : 'slideDown', // 'slideDown', 'show', 'fadeIn', or custom hideMethod : 'slideUp', // 'slideUp', 'hide', 'fadeOut', or custom showSpeed : 400, hideSpeed : 800, scrollSpeed : 600, //speed of repositioning the newly opened section when it is pushed off screen. activeLink : true, //{true} if the accordion is used for site navigation event : 'click', //'click', 'hover' focus : true, // it is needed for keyboard accessibility when we use {event:'hover'} interval : 400, // time-interval for delayed actions used to prevent the accidental activation of animations when we use {event:hover} (in milliseconds) collapsible : true, // {true} - makes the accordion fully collapsible, {false} - forces one section to be open at any time standardExpansible : false, //if {true}, the functonality will be standard Expand/Collapse without 'accordion' effect lastChild : true, //if {true}, the items without sub-elements will also trigger the 'accordion' animation shift: false, // false, 'clicked', 'all'. If 'clicked', the clicked item will be moved to the first position inside its level, // If 'all', the clicked item and all following siblings will be moved to the top elToWrap: null, // null, or the element, besides the text node, to be wrapped by the trigger, eg 'span:first' uri : 'full', // retFunc: null, // linkDisabled: '' // add disabled class to link to not don't add event }; /* --------------------------------------------- Feel free to remove the following code if you don't need these custom animations. ------------------------------------------------ */ //credit: http://jquery.malsup.com/fadetest.html $.fn.slideFadeDown = function(speed, callback) { return this.animate({opacity: 'show', height: 'show'}, speed, function() { if (jQuery.browser.msie) { this.style.removeAttribute('filter'); } if (jQuery.isFunction(callback)) { callback(); } }); }; $.fn.slideFadeUp = function(speed, callback) { return this.animate({opacity: 'hide', height: 'hide'}, speed, function() { if (jQuery.browser.msie) { this.style.removeAttribute('filter'); } if (jQuery.isFunction(callback)) { callback(); } }); }; /* --- end of the optional code --- */ })(jQuery); /////////////////////////// // The plugin can be called on the ID of the accordion element or on the ID of its closest named container. // If the plugin is called on a named container, we can initialize all the accordions residing in a given section with just one call. // EXAMPLES: /* --- $(function() { // If the closest named container = #container1 or the accordion element is <ul id="subnavigation">: /// Standard nested lists: $('#container1').accordion(); // we are calling the plugin on the closest named container $('#subnavigation').accordion({container:false}); // we are calling the plugin on the accordion element // this will expand the sub-list with "id=current", when the accordion is initialized: $('#subnavigation').accordion({container:false, initShow : "#current"}); // this will expand/collapse the sub-list when the mouse hovers over the trigger element: $('#container1').accordion({event : "hover", initShow : "#current"}); // If the closest named container = #container2 /// Nested Lists + Headings + DIVs: $('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div'}); $('#container2').accordion({el: '.h', head: 'h4, h5', next: 'div', initShow : 'div.outer:eq(0)'}); /// Nested DIVs + Headings: $('#container2').accordion({obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer'}); $('#container2').accordion({objID: '#acc2', obj: 'div', wrapper: 'div', el: '.h', head: 'h4, h5', next: 'div.outer', initShow : '.shownd', shift: 'all'}); }); /// We can globally replace the defaults, for example: $.fn.accordion.defaults.initShow = "#current"; --- */ /// Example options for Hover Accordion: /* --- $.fn.accordion.defaults.container=false; $.fn.accordion.defaults.event="hover"; $.fn.accordion.defaults.focus=false; // Optional. If it is possible, use {focus: true}, since {focus: false} will break the keyboard accessibility $.fn.accordion.defaults.initShow="#current"; $.fn.accordion.defaults.lastChild=false; --- */ 

Answer 6

You can use the "beforeActivate" event for this.

Add disable class to your h3 element

 <h3 class="accordionDisable disabledItemOne" >Title</h3> 

Set the following function to the "beforeActivate" event. The header object can be obtained through the "ui.newHeader" object. Check if the heading has the class "accordionDisable" if true, then returns false and it will stop activating the accordion section.

 $( "#your_accordion" ).accordion({ beforeActivate : function( event, ui ){ if( ui.newHeader.hasClass( 'accordionDisable' ) ){ return false; } } }); 

To activate the harmonics section, delete the class

 $( '.disabledItemOne' ).removeClass( 'accordianDisable' ); 

Answer 7

Use the classes for the section you want to include and create a more specific CSS selector when initializing the accordion.

Answer 8

Marcgg's answer seems to be on the right track. What you can do is add a class to the links you want to include in the accordion, get href from them, and then go to url by setting window.location.

  $("a.enlnk").live("click", function() { var navigateToLink = $.trim(this.href); if (navigateToLink) { window.location.href = navigateToLink; } }); 

Answer 9

I had the same problem. I wanted to stick with a diva that was not part of the accordion. It was a div, while there were other elements on the accordion. I added the header parameter: '' and this prevented the addition of classes to the div that I had.

Answer 10

I cannot find the solutions provided to work with the jQuery UI version. I am using ATM (version 1.8).

I found another solution,

 $(".toDisable").each(function(){ $(this) .addClass("ui-state-disabled") .unbind("click"); }); 

Answer 11

I had a similar problem. I need a 5-part accordion, but the last two parts were not available until the first three (which caused different actions) were performed. Here's how I dealt with this (using two separate accordions):

HTML:

  <div id="accordion_1"> <h3 id="title1"><a href="#">Content for Title 1</a></h3> <div>Content for Section 1</div> <h3 id="title2"><a href="#">Content for Title 2</a></h3> <div>Content for Section 2</div> <h3 id="title3"><a href="#">Content for Title 3</a></h3> <div>Content for Section 3</div> </div> <div id="accordion_2" class="faded_out"> <h3><a href="#">Content for Title 4</a></h3> <div>Content for Section 4</div> <h3><a href="#">Content for Title 5</a></h3> <div>Content for Section 5</div> </div> 

JavaScript:

  $(document).ready(function(){ $('#accordion_1').accordion({ active:false, collapsible:true }); $('#accordion_1').click(function(){ $(this).siblings().accordion('activate',false); }); $('#accordion_2').accordion({ active:false, disabled:true, collapsible:true, }); $('#accordion_2').click(function(){ $(this).siblings().accordion('activate',false); }); function ReleaseAccordion2(){ if($('h3#title1').hasClass('complete') && $('h3#title2').hasClass('complete') && $('h3#title3').hasClass('complete')){ $('#accordion_2').accordion('enable'); $('#accordion_2').removeClass('faded_out'); } } ReleaseAccordion2(); } 

So we tuned the second accordion to disconnect. Moreover, he is provided with the CSS class 'faded_out', which gives some opacity and sets the mouse pointer to the default value for anchors. Finally, when the accordion is pressed, it sets the “activate” to false on the other to close the other accordion and make it seem that they are part of the same. It is very good for me, as it is.

PS My application is on rails and in order to determine whether to enable the second accordion (via the ReleaseAccordion2 function), I am looking for a class ("full") passed to h3 in the first accordion (via the built-in ruby).

Answer 12

 $('.disabled').addClass('ui-state-disabled').on('click', function () { return false; }); 

 <h3 class="disabled">Payment Information </h3>