Im trying to get the nice design the Accordion control has in jQuery to a custom control of myself. So I copied the code below (Accordion) from the 1.8rc1 jQuery UI release. I then replaced all occurences of "accordion" with "product".
I also copied the accordion css and again replaced all occurences of "accordion" with "product". But my design ends up looking....well....ugly :) See here in action: http://www.jux tar.nl/ See below all code: *********CSS********* .ui-product .ui-product-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } .ui-product .ui-product-li-fix { display: inline; } .ui-product .ui-product-header-active { border-bottom: 0 !important; } .ui-product .ui-product-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } .ui-product-icons .ui-product-header a { padding-left: 2.2em; } .ui-product .ui-product-header .ui-icon { position: absolute; left: . 5em; top: 50%; margin-top: -8px; } .ui-product .ui-product-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } .ui-product .ui-product-content-active { display: block; } *********HTML********* <div class="ui-product ui-widget ui-helper-reset" style="width: 300px;" role="tablist"> <h3 class="ui-product-header ui-helper-reset ui-state-active ui- corner-top" role="tab" aria-expanded="true" tabindex="0"><a href='<?= $prodLink?>' class='producttitle'><?=$prodRec['TITLE']?></a></h3> <div class="ui-product-content ui-helper-reset ui-widget-content ui-corner-bottom ui-product-content-active" style="height: 200px;" role="tabpanel"> SOME CONTENT </div></div> *********JS********* * jQuery UI product 1.8rc1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * * http://docs.jquery.com/UI/product * * Depends: * jquery.ui.core.js * jquery.ui.widget.js */ (function(a){a.widget("ui.product",{options:{active: 0,animated:"slide",autoHeight:true,clearStyle:false,collapsible:false,event:"click",fillSpace:false,header:"> li > :first-child,> :not(li):even",icons:{header:"ui-icon-triangle-1- e",headerSelected:"ui-icon-triangle-1- s"},navigation:false,navigationFilter:function(){return this.href.toLowerCase()==location.href.toLowerCase()}},_create:function (){var d=this.options,b=this;this.running=0;this.element.addClass("ui- product ui-widget ui-helper-reset");if(this.element[0].nodeName=="UL") {this.element.children("li").addClass("ui-product-li-fix")} this.headers=this.element.find(d.header).addClass("ui-product-header ui-helper-reset ui-state-default ui-corner-all").bind ("mouseenter.product",function(){a(this).addClass("ui-state- hover")}).bind("mouseleave.product",function(){a(this).removeClass("ui- state-hover")}).bind("focus.product",function(){a(this).addClass("ui- state-focus")}).bind("blur.product",function(){a(this).removeClass("ui- state-focus")});this.headers.next().addClass("ui-product-content ui- helper-reset ui-widget-content ui-corner-bottom");if(d.navigation){var c=this.element.find("a").filter(d.navigationFilter);if(c.length){var e=c.closest(".ui-product-header");if(e.length){this.active=e}else {this.active=c.closest(".ui-product-content").prev()}}} this.active=this._findActive(this.active||d.active).toggleClass("ui- state-default").toggleClass("ui-state-active").toggleClass("ui-corner- all").toggleClass("ui-corner-top");this.active.next().addClass("ui- product-content-active");this._createIcons();if(a.browser.msie) {this.element.find("a").css("zoom","1")}this.resize();this.element.attr ("role","tablist");this.headers.attr("role","tab").bind ("keydown",function(f){return b._keydown(f)}).next().attr ("role","tabpanel");this.headers.not(this.active||"").attr("aria- expanded","false").attr("tabIndex","-1").next().hide();if(! this.active.length){this.headers.eq(0).attr("tabIndex","0")}else {this.active.attr("aria-expanded","true").attr("tabIndex","0")}if(! a.browser.safari){this.headers.find("a").attr("tabIndex","-1")}if (d.event){this.headers.bind((d.event)+".product",function(f) {b._clickHandler.call(b,f,this);f.preventDefault ()})}},_createIcons:function(){var b=this.options;if(b.icons){a("<span/ >").addClass("ui-icon "+b.icons.header).prependTo (this.headers);this.active.find(".ui-icon").toggleClass (b.icons.header).toggleClass (b.icons.headerSelected);this.element.addClass("ui-product- icons")}},_destroyIcons:function(){this.headers.children(".ui- icon").remove();this.element.removeClass("ui-product- icons")},destroy:function(){var c=this.options;this.element.removeClass ("ui-product ui-widget ui-helper-reset").removeAttr("role").unbind (".product").removeData("product");this.headers.unbind (".product").removeClass("ui-product-header ui-helper-reset ui-state- default ui-corner-all ui-state-active ui-corner-top").removeAttr ("role").removeAttr("aria-expanded").removeAttr ("tabindex");this.headers.find("a").removeAttr ("tabindex");this._destroyIcons();var b=this.headers.next().css ("display","").removeAttr("role").removeClass("ui-helper-reset ui- widget-content ui-corner-bottom ui-product-content ui-product-content- active");if(c.autoHeight||c.fillHeight){b.css("height","")}return this},_setOption:function(b,c){a.Widget.prototype._setOption.apply (this,arguments);if(b=="active"){this.activate(c)}if(b=="icons") {this._destroyIcons();if(c){this._createIcons()}}},_keydown:function(e) {var g=this.options,f=a.ui.keyCode;if(g.disabled||e.altKey||e.ctrlKey) {return}var d=this.headers.length;var b=this.headers.index (e.target);var c=false;switch(e.keyCode){case f.RIGHT:case f.DOWN:c=this.headers[(b+1)%d];break;case f.LEFT:case f.UP:c=this.headers[(b-1+d)%d];break;case f.SPACE:case f.ENTER:this._clickHandler({target:e.target},e.target);e.preventDefault ()}if(c){a(e.target).attr("tabIndex","-1");a(c).attr ("tabIndex","0");c.focus();return false}return true},resize:function() {var d=this.options,c;if(d.fillSpace){if(a.browser.msie){var b=this.element.parent().css("overflow");this.element.parent().css ("overflow","hidden")}c=this.element.parent().height();if (a.browser.msie){this.element.parent().css("overflow",b)} this.headers.each(function(){c-=a(this).outerHeight (true)});this.headers.next().each(function(){a(this).height(Math.max (0,c-a(this).innerHeight()+a(this).height()))}).css("overflow","auto")} else{if(d.autoHeight){c=0;this.headers.next().each(function() {c=Math.max(c,a(this).height())}).height(c)}}return this},activate:function(b){this.options.active=b;var c=this._findActive (b)[0];this._clickHandler({target:c},c);return this},_findActive:function(b){return b?typeof b=="number"? this.headers.filter(":eq("+b+")"):this.headers.not(this.headers.not (b)):b===false?a([]):this.headers.filter(":eq (0)")},_clickHandler:function(b,f){var d=this.options;if(d.disabled) {return}if(!b.target){if(!d.collapsible){return}this.active.removeClass ("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner- all").find(".ui-icon").removeClass(d.icons.headerSelected).addClass (d.icons.header);this.active.next().addClass("ui-product-content- active");var h=this.active.next(),e={options:d,newHeader:a ([]),oldHeader:d.active,newContent:a([]),oldContent:h},c=(this.active=a ([]));this._toggle(c,h,e);return}var g=a(b.currentTarget||f);var i=g[0] ==this.active[0];d.active=d.collapsible&&i?false:a(".ui-product- header",this.element).index(g);if(this.running||(!d.collapsible&&i)) {return}this.active.removeClass("ui-state-active ui-corner- top").addClass("ui-state-default ui-corner-all").find(".ui- icon").removeClass(d.icons.headerSelected).addClass(d.icons.header);if (!i){g.removeClass("ui-state-default ui-corner-all").addClass("ui- state-active ui-corner-top").find(".ui-icon").removeClass (d.icons.header).addClass(d.icons.headerSelected);g.next().addClass ("ui-product-content-active")}var c=g.next(),h=this.active.next(),e= {options:d,newHeader:i&&d.collapsible?a ([]):g,oldHeader:this.active,newContent:i&&d.collapsible?a([]):c.find ("> *"),oldContent:h.find("> *")},j=this.headers.index(this.active[0]) >this.headers.index(g[0]);this.active=i?a([]):g;this._toggle (c,h,e,i,j);return},_toggle:function(b,i,g,j,k){var d=this.options,m=this;this.toShow=b;this.toHide=i;this.data=g;var c=function(){if(!m){return}return m._completed.apply (m,arguments)};this._trigger ("changestart",null,this.data);this.running=i.size()===0?b.size ():i.size();if(d.animated){var f={};if(d.collapsible&&j){f={toShow:a ([]),toHide:i,complete:c,down:k,autoHeight:d.autoHeight||d.fillSpace}} else{f={toShow:b,toHide:i,complete:c,down:k,autoHeight:d.autoHeight|| d.fillSpace}}if(!d.proxied){d.proxied=d.animated}if(!d.proxiedDuration) {d.proxiedDuration=d.duration}d.animated=a.isFunction(d.proxied)? d.proxied(f):d.proxied;d.duration=a.isFunction(d.proxiedDuration)? d.proxiedDuration(f):d.proxiedDuration;var l=a.ui.product.animations,e=d.duration,h=d.animated;if(h&&!l[h]&&! a.easing[h]){h="slide"}if(!l[h]){l[h]=function(n){this.slide(n, {easing:h,duration:e||700})}}l[h](f)}else{if(d.collapsible&&j){b.toggle ()}else{i.hide();b.show()}c(true)}i.prev().attr("aria- expanded","false").attr("tabIndex","-1").blur();b.prev().attr("aria- expanded","true").attr("tabIndex","0").focus()},_completed:function(b) {var c=this.options;this.running=b?0:--this.running;if(this.running) {return}if(c.clearStyle){this.toShow.add(this.toHide).css ({height:"",overflow:""})}this.toHide.removeClass("ui-product-content- active");this._trigger("change",null,this.data)}});a.extend (a.ui.product,{version:"1.8rc1",animations:{slide:function(j,h) {j=a.extend({easing:"swing",duration:300},j,h);if(!j.toHide.size()) {j.toShow.animate({height:"show"},j);return}if(!j.toShow.size()) {j.toHide.animate({height:"hide"},j);return}var c=j.toShow.css ("overflow"),g=0,d={},f={},e= ["height","paddingTop","paddingBottom"],b;var i=j.toShow;b=i [0].style.width;i.width(parseInt(i.parent().width(),10)-parseInt(i.css ("paddingLeft"),10)-parseInt(i.css("paddingRight"),10)-(parseInt(i.css ("borderLeftWidth"),10)||0)-(parseInt(i.css("borderRightWidth"),10)|| 0));a.each(e,function(k,m){f[m]="hide";var l=(""+a.css(j.toShow [0],m)).match(/^([\d+-.]+)(.*)$/);d[m]={value:l[1],unit:l [2]||"px"}});j.toShow.css({height:0,overflow:"hidden"}).show ();j.toHide.filter(":hidden").each(j.complete).end().filter (":visible").animate(f,{step:function(k,l){if(l.prop=="height"){g= (l.end-l.start===0)?0:(l.now-l.start)/(l.end-l.start)}j.toShow[0].style [l.prop]=(g*d[l.prop].value)+d [l.prop].unit},duration:j.duration,easing:j.easing,complete:function() {if(!j.autoHeight){j.toShow.css("height","")}j.toShow.css ("width",b);j.toShow.css({overflow:c});j.complete ()}})},bounceslide:function(b){this.slide(b, {easing:b.down?"easeOutBounce":"swing",duration:b.down?1000:200})}}})}) (jQuery);;/* -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery...@googlegroups.com. To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.
