You can put classes on the things you want to disable.

Then do :

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

or something similar

Previous trick does not work because of the binding order of events, 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);
    }
};

Whenever you want to activate a tab, do:

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

That s it

A simplistic way maybe using the unbind method:

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

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

Like for a home link? I wanted a home link styled "regularly" at the top of my accordion. I m using Google s 1.8 UI version:

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

Un-minified:

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

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

// this.headers.index == My First "Home" Accordion H3.

if(this.headers.index(event.currentTarget) == 0){window.location= /support ;return;}

i added the option linkDisabled to the plugin. this way you can define a class for the links inside the accordion object, which are disabled. e.g.:

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

and here s the rewritten plugin:

/* ---------------------------------------------
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/jquery-en@googlegroups.com/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, e.g.  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;
--- */

I had a similar problem. I needed a 5 part accordion, but the last two parts were not to be accessible until the first three (which prompted for different actions) were completed. Here s how I handled it (using 2 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();
    }

This way, we set up the second accordion so that it starts out disabled. Moreover, it is given CSS class faded_out which gives some opacity and sets the mouse cursor to default for anchors. Finally, when either accordion is clicked, it sets activate to false on the other so as to close the other accordion and make it seem like they are part of the same one. This works very well for me as is.

P.S. My app is on rails, and in order to detect whether or not the second accordion should be enabled (via the ReleaseAccordion2 function), I look for a class ( complete ) passed to the h3 s in the first accordion (via embedded ruby).

You can use the beforeActivate event for this.

Add a disable class to your h3 element

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

Set the below function to the beforeActivate event. The header object can be accessed via the ui.newHeader object. Test if the header has accordionDisable class, if true then return false and it will stop the accordion section from activating.

$( "#your_accordion" ).accordion({ 

beforeActivate :  function(  event, ui  ){

    if( ui.newHeader.hasClass(  accordionDisable  ) ){

        return false;

    }
} 
});

To activate the accordian section remove the accordionDisable class

$(  .disabledItemOne  ).removeClass(  accordianDisable  );

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

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

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

I had the same issue. I wanted to stick in a div that wasn t a part of the accordion. It was a div whereas the other elements in the accordion were . I added the header: option and this prevented the classes from being added to the div that I had.

I can t seem to get the solutions given to work with the version of jQuery UI I m using ATM (Version 1.8)

I did find another solution;

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