jQuery UI Accordion - Cancel Change

/*! 
 * Nested Accordion v.1.4.7.4 
 * Script to create 'accordion' functionality on a hierarchically structured content.
 * http://www.adipalaz.com/experiments/jquery/nested_accordion.html
 *
 * Requires: jQuery v. 1.4.3+ / updated for jQuery v. 1.9 /
 * Copyright (c) 2009, 2013 Adriana Palazova
 *
 * Dual licensed under the MIT (http://www.adipalaz.com/docs/mit-license.txt) and GPL v. 2 (http://www.adipalaz.com/docs/gpl-license.txt) licenses.
 */
 
;(function($) {
  //"use strict";
  $.fn.accordion = function(options) {

    var version = '1.4.7.4';
    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) {
              if (o.iconTrigger) {
                $node.find('> a').addClass('link');
              } else {
                $node.find('> a').addClass("trigger");
              }
            } else {
                var anchor = o.iconTrigger ? '<span class="heading" />' : '<a class="trigger" href="#" />'
                if (o.elToWrap) {
                  var $t = nodes($node), $s = $node.find(o.elToWrap), $object = $t.add($s);
                  $object.wrapAll(anchor);
                } else {
                  nodes($node).wrap(anchor);
                }
            }
            if(o.iconTrigger) {
              $node.find('> a, >span.heading').before('<a href="#" class="icon trigger"></a>'); 
              $node.find('> a.icon.trigger');
            }
            
          } else {
            $node.addClass('last-child');
            if (o.lastChild && $node.find('> a').length) {$node.find('> a').addClass("trigger");}
          }
      });
      function nodes(el) {
        var txt = [];
        el.each(function(){
          $.each(this.childNodes, function() { if (this.nodeType == 3 && $.trim(this.nodeValue)) {txt.push(this);} })
        }); 
        return $(txt);
      };
      
      // init state
      $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shown').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
      
      if (o.activeLink && o.initShow) {
          var fullURL = window.location.href,
              arrPath = fullURL.split(o.splitUrl),
              relPath = (o.uri != 'full' && fullURL.indexOf(o.splitUrl) >= 0) ? arrPath[arrPath.length-1] : fullURL;
          $(Obj + ' a:not([href $= "#"])').each(function() {
            var a = $(this), fullHref, aHref;
            if (o.uri != 'full' && a.attr('href').indexOf(o.splitUrl) >= 0) {
              fullHref = a.attr('href').split(o.splitUrl); aHref = fullHref[fullHref.length-1];
            } else {
              aHref = a.attr('href');
            }
            if (aHref == relPath) {
              a.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 = ($().addBack) ? $currentWrap.nextAll().addBack() : $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('shown').siblings(o.wrapper).removeClass('shown');
        }
        if (o.shift == 'all' && $siblings.length > 1) {$curentStack.insertBefore($first);}
      }
          
      if (o.initShow) {
        $(Obj).find(o.initShow).show().addClass('shown')
          .parents(Obj + ' ' + o.next).show().addClass('shown').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.trigger').addClass('open').data('state', 1 );}
          if ($(Obj + ' ' + o.initShow).next(o.next).length) {$(Obj + ' ' + o.initShow).next(o.next).show().end().find('> a.trigger').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),
              $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('.shown'))) {
                  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 = ($().addBack) ? $thisWrapper.nextAll().addBack() : $thisWrapper.nextAll().andSelf(),
                    $first = $siblings.filter(":first");
                if (o.shift == 'clicked' || (o.shift == 'all' && $siblings.length)) {
                  $thisWrapper.insertBefore($first).addClass('shown').siblings(o.wrapper).removeClass('shown');
                }
                if (o.shift == 'all' && $siblings.length > 1) {$thisStack.insertBefore($first);}
              }
          }
          if (o.event == 'click') {
              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() {
                  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'
    iconTrigger : false,
    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', // 'full' if you use absolute paths. 'relative' - if you use relative paths in a navigation accordion - specify splitUrl option below
    splitUrl: '/', // If you use relative paths in a navigation accordion, specify a symbol '/', '?', '#', etc.
    retFunc: null //
  };

  /* ---------------------------------------------
  Feel free to remove the following code if you don't need these custom animations.
  ------------------------------------------------ */
  var msie = false;
  if(typeof window.attachEvent != 'undefined') { msie = true; } // IE before version 9

  $.fn.slideFadeDown = function(speed, callback) { 
    return this.animate({opacity: 'show', height: 'show'}, speed, function() { 
      if (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 (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 - ({container: false}) 
//  or 
//  on the ID of its closest named container - ({container: true}) - default. In this case, the accordions should have a class. The default class is ".accordion". 
//
//  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"});
      // NEW in v.1.4.7.4: The accordion animations can be triggered by clicking the icons:
      $('#container1').accordion({iconTrigger: true});
      // NEW in v.1.4.7.4: In a navigation accordion, we can use relative paths. We should specify the split symbol in option splitUrl:
      $("#container1").accordion({initShow: "#current", uri: "relative", splitUrl: '?'});    
     
    // 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 : '.shown', shift: 'all'});
      
    });

    /// We can globally replace the defaults, for example:
    $.fn.accordion.defaults.initShow = "#current";
    $.fn.accordion.defaults.container = false;

    /// 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;
--- */

<head runat="server">
    <title></title>
    <style type='text/css'>
        *
        {
            margin: 0;
            padding: 0;
        }
        #main
        {
            color: #333;
            font: 76%/1.6 verdana,geneva,lucida, 'lucida grande' ,arial,helvetica,sans-serif;
            text-align: left;
            position: relative;
            min-height: 0;
        }
        #main p
        {
            margin: 0 10px 1em;
        }
        #main .strong
        {
            font-weight: 700;
        }
        #main .clear
        {
            clear: both;
        }
        #main img
        {
            border: 0 none;
        }
        
        /* --- Headings --- */
        #main h1
        {
            font-family: georgia, 'times new roman' ,times,serif;
            font-size: 2.5em;
            font-weight: normal;
            color: #f60;
        }
        
        #main h1, #main h2, #main h3
        {
            margin-bottom: 1em;
        }
        
        #main h2, #main h3, #main h4 a, #main h5 a
        {
            padding: 3px 10px;
        }
        
        #main h2, #main h3, #main h4, #main h5
        {
            font-size: 1em;
        }
        
        #main h2
        {
            background-color: #f0f0f0;
        }
        
        /* --- Links --- */
        #main a
        {
            padding: 1px;
            border: 1px solid #e0e0e0;
            color: #05b;
        }
        
        #main a:hover, #main a:focus, #main a:active
        {
            border-color: #bcd;
            text-decoration: none;
            outline: 0 none;
        }
        
        /* --- Accordion --- */
        .js #main .accordion
        {
            visibility: hidden;
        }
        .accordion
        {
            margin: 0;
            padding: 0 10px;
        }
        .accordion li
        {
            list-style-type: none;
        }
        .accordion li.last-child
        {
            margin-left: 19px;
            list-style-type: disc;
        }
        .accordion .outer
        {
            border: 1px solid #dadada;
            border-width: 0 1px 1px;
            background: #fff;
        }
        .accordion .inner
        {
            margin-bottom: 0;
            padding: .5em 20px 1em;
            position: relative;
            overflow: hidden;
        }
        /*.accordion .inner .inner
        {
            padding-bottom: 0;
        }*/
        .accordion .h
        {
            padding-top: .3em;
        }
        /* vertical padding instead of vertical margin (ie8) */
        .accordion p
        {
            margin: .5em 1px 1em;
        }
        
        /*  
  Add styles for all links in the 'accordion':
.accordion a {...}
*/
        
        #main a.trigger
        {
            display: block;
            padding-left: 20px;
            background-image: url(Img/plus.gif);
            background-repeat: no-repeat;
            background-position: 1px 50%;
            font-weight: 700;
        }
        
        #main a.trigger.open
        {
            background-image: url(Img/minus.gif);
        }
        
        #main .last-child a.trigger
        {
            padding-left: 1px;
            background-image: none;
            font-weight: normal;
        }
        
        #main a.trigger
        {
            background-color: #f0f0f0;
        }
        
        #main a.trigger.open
        {
            border-color: #dadada;
            background-color: #e7e7e7;
        }
        
        #main a:hover.trigger.open, #main a:focus.trigger.open, #main a:active.trigger.open
        {
            border-color: #bcd;
        }
    </style>
    <!--[if lte IE 6]>
<style type='text/css'>
  * html #main, * html #container, #side a, a.trigger, .accordion .inner {height:1%}
  #lenta{height:52px}
</style>
<script type="text/javascript">
   try { document.execCommand( "BackgroundImageCache", false, true); } catch(e) {};
</script>
<![endif]-->
    <!--[if lte IE 7]>
<style type="text/css">
  .accordion .inner {position:static; overflow:visible}
</style>
<![endif]-->
    <!--[if !lt IE 6]><!-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="Scripts/jquery.nestedAccordion.js" type="text/javascript"></script>
    <script type="text/javascript">
<!--        //--><![CDATA[//><!--
        $("html").addClass("js");
        $.fn.accordion.defaults.container = false;
        $(function () {
            $("#acc1").accordion({
                el: ".h",
                head: "h4, h5",
                next: "div",
                initShow: "div.outer:eq(1)"
            });
            $("html").removeClass("js");
        });
        //--><!]]>
    </script>
    <!--<![endif]-->
</head>
<body>
    <form id="form1" runat="server">
    <div id="main">
        <ul id="acc1" class="accordion">
            <li>
                <h4 class="h">
                    <a class="trigger open" href="#">Heading 1</a></h4>
                <div class="outer shown" style="display: block;">
                    <div class="inner shown">
                        <p>
                            Sample Text</p>
                        <ul>
                            <li>
                                <h5 class="h">
                                    <a class="trigger open" href="#">Heading a</a></h5>
                                <div class="outer shown" style="display: block;">
                                    <div class="inner shown">
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                                            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                                            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                            deserunt mollit anim id est laborum.
                                        </p>
                                        <ul>
                                            <li>
                                                <h5 class="h">
                                                    <a class="trigger open" href="#">Heading b</a></h5>
                                                <div class="outer" style="display: block;">
                                                    <div class="inner shown">
                                                        <p>
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                                                            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                                                            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                                            deserunt mollit anim id est laborum.
                                                        </p>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    </form>
</body>
</html>