JavaScript - Custom Javascript Accordion

I'm using custom javascript tooltips to show information about designs in a t-shirt shop, such as design name and artist. I downloaded the code and CSS for the tooltips and am attempting to assign the tooltip to each design using a javascript array and a for-in loop. Only problem is that the tooltips aren't showing at all, no matter what I do. I think the problem is related to the onmouseover event that I'm using, but the only thing that seems to work even partway is changing the visibility to "show" in the CSS. From that I can see that the text is being assigned to the tooltips properly and that they are being positioned within the window, but the onmouseover event is having no effect either way when I revert the visibility back to "hidden." Help!

Here is the code for the "toolTip.js" file:

Code:

// Extended Tooltip Javascript
// copyright 9th August 2002, 3rd July 2005, 24th August 2008
// by Stephen Chapman, Felgall Pty Ltd

// permission is granted to use this javascript provided that the below code is not altered

function pw() 
	{return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth}; 
	
function mouseX(evt) 
	{return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;} 

function mouseY(evt) 
	{return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY} 
	
function popUp(evt,oi) 
	{if (document.getElementById) 
		{var wp = pw(); 
		dm = document.getElementById(oi); 
		ds = dm.style; 
		st = ds.visibility; 
		
		if (dm.offsetWidth) 
			ew = dm.offsetWidth; 
		
		else if (dm.clip.width) 
			ew = dm.clip.width; 
			
			if (st == "visible" || st == "show") 
				{ ds.visibility = "hidden"; } 
			
			else {
				tv = mouseY(evt) + 20; 
				lv = mouseX(evt) - (ew/4); 
				
				if (lv < 2) 
					lv = 2; 
				
				else if (lv + ew > wp) 
						lv -= ew/2; lv += 'px';tv += 'px';  
						ds.left = lv; 
						ds.top = tv; 
						ds.visibility = "visible";
				}
			}
		}

Here is the relevant code where I attempt to assign the event to the tooltip visibility change. Note the syntax in SetLinks() function, where the onclick behavior is set. This syntax is working perfectly here. I modelled the 'controlPopUp() syntax similarly, but no go.

Code:

window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
		controlToolTip();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
						
						var newDesignTip = document.createElement('div');
						var newDesignTipID = "tt-design" + boxNum;
						newDesignTip.setAttribute('class',"tip");
						newDesignTip.textContent = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						newDesignTip.innerText = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						
						newDesignBox.appendChild(newDesignTip);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (var x in designImages)
			{ 
				document.getElementById("design"+x).onclick = new Function( "sendToURL(" + x + ")" );
			}
	}
	
function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

function controlToolTip()
	{
		for (var x in designImages)
			{ 
				var currTip = "tt-design" + x;
				document.getElementById( "design" + x ).onmouseover = "controlPopUp( event , " + x + ")";
			}
	}
	
function controlPopUp( evt , x )
	{
		var e = evt;
		var currTip = "tt-design" + x;
		popUp( e , currTip );
	}

Here is the CSS:

Code:

.tip {
	font:10px/12px Arial,Helvetica,sans-serif; 
	border:solid 1px #666666; 
	width:270px; 
	padding:1px;
	position:absolute; 
	z-index:100; 
	visibility:hidden;
	color:#333333; 
	top:20px;
	left:90px; 
	background-color:#ffffcc;
	layer-background-color:#ffffcc;
}

Thanks in advance for your help!

Hi All,

Wondering if someone could help me out. i am developing a simple javascript calculator at the problem is this:

When I use the input type = button or submit, then the calculator works fine

BUT

I need to use a custom button and now the calculator just shows the results for a split second and then disappears and the form reloads

I have made the button line in bold. All help appreciated!!

Many thanks

Here is my code:

<html>
<head>


<script language="JavaScript">
function Framesize(BikeSizer)
{
var a = parseFloat(BikeSizer.Insleg.value);
b = (a * 0.572);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;

d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;

}
</script>


</head>
<body>

<Form name="BikeSizer">
<!--The visuals for the graphic-->

<table cellpadding="0" cellspacing="0" align="center" border="0" width="370">
<tr>
<td align="center" valign="top"><img src="images/Calculator_bg_top.gif" border="0"></td>
</tr>
</table>

<table cellpadding="0" border="0" cellspacing="0" align="center" width="370" style="background:url(images/Calculator_bg_mid.gif) repeat-y top center; font-family:Verdana, Arial, Tahoma;">
<tr>
<td colspan="2" valign="middle" align="left">
<div style="padding:2px 5px 5px 12px;">
<font style="font-weight: bold; color:#cc6600; font-size:14px">Berechnung der richtigen Rahmenh&ouml;he</font>
<br /><a href="#" style="font-size:10px">Wie messe ich die Schrittl&auml;nge richtig?</a></div>
</td>
</tr>

<tr>
<td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Fahrradart:</div></td>
<td><select name="Biketype" style="font-size:11px;">
<option>Mountainbike</option>
<option>Trekking-, Reise- oder Cityrad</option>
<option>Rennrad</option>
</select></td>
</tr>

<tr>
<td align="left" valign="middle"><div style="font-size:11px; padding:7px 0 7px 12px;">Schritth&ouml;e:</div></td>
<td><input name="Insleg"></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><div style="padding:6px 0 8px 0;">
<input type="image" NAME="calc" VALUE="Calculate" src="images/berechnen_btn.gif" onClick=Framesize(BikeSizer)>
</div></td>
</tr>

<tr>
<td align="left" valign="top"><div style="font-size:13px; padding:0px 0 7px 12px;"><strong>Rahmenh&ouml;e:</strong></div></td>
<td align="left" valign="top" style="font-size:13px;"><input name = "FramesizeCM"> &nbsp;<strong>CM</strong>
<br /><br /><input name = "FramesizeInch"> &nbsp;<strong>Zoll</strong>
</td>
</tr>
</table>

<table cellpadding="0" cellspacing="0" align="center" border="0" width="370">
<tr>
<td align="center" valign="top"><img src="images/Calculator_bg_end.gif" border="0"></td>
</tr>
</table>
</FORM>

I am working on a website that features a custom javascript enabled audio player with an animated playhead to follow along with the provided spectrogram. An example of this is included below.

http://cetus.ucsd.edu/voicesinthesea.../humpback.html

I am having difficulty figuring out why the audio/spectrogram player does not work on an iPad. This component was built by a developer who I am not longer in contact with, thus I am in urgent need of some advice/wisdom.

Thank you!

Hello to all,
I have a little problem with my accordion menu and I CRAVE for your help!

I try to make this: when you visit my page I need the menu to be all collapsed.
Also the history of clicks (it remembers which menus where left opened) works fine on IE but not on firefox.

Here is the js code:

function add_menu_event_handlers()
{
var elems = document.getElementsByTagName('h3');
for (i = 0; i < elems.length; i++)
{
switch (elems[i].parentNode.className)
{
/*case 'moduletable':
case 'moduletable_menu':*/
case 'left_module_title':
case 'left_module_title_menu':
{
if (elems[i].parentNode.parentNode.parentNode.id == 'xp-left')
{
xplike_addEvent(elems[i], 'click', function(){menu_header_click(this);});
// menu_header_click(elems[i]);
//Load status from cookies and collapse if required
var cookie_array = document.cookie.split(';');
for(var j=0; j<cookie_array.length; j++)
{
var c = cookie_array[j];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf('xplike_menu_status_' + elems[i].firstChild.nodeValue.replace('.', '_').replace(' ', '_')) == 0)
{
var menu_cookie = c.split('=')
if (menu_cookie.length == 2 && menu_cookie[1] == '1')
{
menu_header_click(elems[i]);
}
}
}
}
}
}
}
}


And it also has this for the history thing.

function save_menu_status(menu_title, value, how_many_days)
{
var date = new Date();
date.setTime(date.getTime()+(how_many_days*24*60*6 0*1000));
var expires = "";
document.cookie = 'xplike_menu_status_' + menu_title.replace('.', '_').replace(' ', '_') + '=' + value + expires + '; path=/';
}

It might be easy and stupid, I know, but since I'm a designer - not a developer - all look weird to me!
Any thoughts?

I'm creating a Jquery UI accordion and here are my customize options...

http://jqueryui.com/demos/accordion/

These options do not include how to make all the accordions start off closed or choosing which one you want open as default when a user sees the page. Right now the user sees the first accordion open. I want to keep them all closed by default or have the option to have the last one open by default.

Any guidance would be great... also not sure what code to post here but I guess I'll add the javaScript used to create the accordion with Jquery....



Code:

/*
 * jQuery UI Accordion 1.8.16
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion
 *
 * Depends:
 *	jquery.ui.core.js
 *	jquery.ui.widget.js
 */
(function( $, undefined ) {

$.widget( "ui.accordion", {
	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 self = this,
			options = self.options;

		self.running = 0;

		self.element
			.addClass( "ui-accordion ui-widget ui-helper-reset" )
			// in lack of child-selectors in CSS
			// we need to mark top-LIs in a UL-accordion for some IE-fix
			.children( "li" )
				.addClass( "ui-accordion-li-fix" );

		self.headers = self.element.find( options.header )
			.addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" )
			.bind( "mouseenter.accordion", function() {
				if ( options.disabled ) {
					return;
				}
				$( this ).addClass( "ui-state-hover" );
			})
			.bind( "mouseleave.accordion", function() {
				if ( options.disabled ) {
					return;
				}
				$( this ).removeClass( "ui-state-hover" );
			})
			.bind( "focus.accordion", function() {
				if ( options.disabled ) {
					return;
				}
				$( this ).addClass( "ui-state-focus" );
			})
			.bind( "blur.accordion", function() {
				if ( options.disabled ) {
					return;
				}
				$( this ).removeClass( "ui-state-focus" );
			});

		self.headers.next()
			.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" );

		if ( options.navigation ) {
			var current = self.element.find( "a" ).filter( options.navigationFilter ).eq( 0 );
			if ( current.length ) {
				var header = current.closest( ".ui-accordion-header" );
				if ( header.length ) {
					// anchor within header
					self.active = header;
				} else {
					// anchor within content
					self.active = current.closest( ".ui-accordion-content" ).prev();
				}
			}
		}

		self.active = self._findActive( self.active || options.active )
			.addClass( "ui-state-default ui-state-active" )
			.toggleClass( "ui-corner-all" )
			.toggleClass( "ui-corner-top" );
		self.active.next().addClass( "ui-accordion-content-active" );

		self._createIcons();
		self.resize();
		
		// ARIA
		self.element.attr( "role", "tablist" );

		self.headers
			.attr( "role", "tab" )
			.bind( "keydown.accordion", function( event ) {
				return self._keydown( event );
			})
			.next()
				.attr( "role", "tabpanel" );

		self.headers
			.not( self.active || "" )
			.attr({
				"aria-expanded": "false",
				"aria-selected": "false",
				tabIndex: -1
			})
			.next()
				.hide();

		// make sure at least one header is in the tab order
		if ( !self.active.length ) {
			self.headers.eq( 0 ).attr( "tabIndex", 0 );
		} else {
			self.active
				.attr({
					"aria-expanded": "true",
					"aria-selected": "true",
					tabIndex: 0
				});
		}

		// only need links in tab order for Safari
		if ( !$.browser.safari ) {
			self.headers.find( "a" ).attr( "tabIndex", -1 );
		}

		if ( options.event ) {
			self.headers.bind( options.event.split(" ").join(".accordion ") + ".accordion", function(event) {
				self._clickHandler.call( self, event, this );
				event.preventDefault();
			});
		}
	},

	_createIcons: function() {
		var options = this.options;
		if ( options.icons ) {
			$( "<span></span>" )
				.addClass( "ui-icon " + options.icons.header )
				.prependTo( this.headers );
			this.active.children( ".ui-icon" )
				.toggleClass(options.icons.header)
				.toggleClass(options.icons.headerSelected);
			this.element.addClass( "ui-accordion-icons" );
		}
	},

	_destroyIcons: function() {
		this.headers.children( ".ui-icon" ).remove();
		this.element.removeClass( "ui-accordion-icons" );
	},

	destroy: function() {
		var options = this.options;

		this.element
			.removeClass( "ui-accordion ui-widget ui-helper-reset" )
			.removeAttr( "role" );

		this.headers
			.unbind( ".accordion" )
			.removeClass( "ui-accordion-header ui-accordion-disabled ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
			.removeAttr( "role" )
			.removeAttr( "aria-expanded" )
			.removeAttr( "aria-selected" )
			.removeAttr( "tabIndex" );

		this.headers.find( "a" ).removeAttr( "tabIndex" );
		this._destroyIcons();
		var contents = this.headers.next()
			.css( "display", "" )
			.removeAttr( "role" )
			.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
		if ( options.autoHeight || options.fillHeight ) {
			contents.css( "height", "" );
		}

		return $.Widget.prototype.destroy.call( this );
	},

	_setOption: function( key, value ) {
		$.Widget.prototype._setOption.apply( this, arguments );
			
		if ( key == "active" ) {
			this.activate( value );
		}
		if ( key == "icons" ) {
			this._destroyIcons();
			if ( value ) {
				this._createIcons();
			}
		}
		// #5332 - opacity doesn't cascade to positioned elements in IE
		// so we need to add the disabled class to the headers and panels
		if ( key == "disabled" ) {
			this.headers.add(this.headers.next())
				[ value ? "addClass" : "removeClass" ](
					"ui-accordion-disabled ui-state-disabled" );
		}
	},

	_keydown: function( event ) {
		if ( this.options.disabled || event.altKey || event.ctrlKey ) {
			return;
		}

		var keyCode = $.ui.keyCode,
			length = this.headers.length,
			currentIndex = this.headers.index( event.target ),
			toFocus = false;

		switch ( event.keyCode ) {
			case keyCode.RIGHT:
			case keyCode.DOWN:
				toFocus = this.headers[ ( currentIndex + 1 ) % length ];
				break;
			case keyCode.LEFT:
			case keyCode.UP:
				toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
				break;
			case keyCode.SPACE:
			case keyCode.ENTER:
				this._clickHandler( { target: event.target }, event.target );
				event.preventDefault();
		}

		if ( toFocus ) {
			$( event.target ).attr( "tabIndex", -1 );
			$( toFocus ).attr( "tabIndex", 0 );
			toFocus.focus();
			return false;
		}

		return true;
	},

	resize: function() {
		var options = this.options,
			maxHeight;

		if ( options.fillSpace ) {
			if ( $.browser.msie ) {
				var defOverflow = this.element.parent().css( "overflow" );
				this.element.parent().css( "overflow", "hidden");
			}
			maxHeight = this.element.parent().height();
			if ($.browser.msie) {
				this.element.parent().css( "overflow", defOverflow );
			}

			this.headers.each(function() {
				maxHeight -= $( this ).outerHeight( true );
			});

			this.headers.next()
				.each(function() {
					$( this ).height( Math.max( 0, maxHeight -
						$( this ).innerHeight() + $( this ).height() ) );
				})
				.css( "overflow", "auto" );
		} else if ( options.autoHeight ) {
			maxHeight = 0;
			this.headers.next()
				.each(function() {
					maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
				})
				.height( maxHeight );
		}

		return this;
	},

	activate: function( index ) {
		// TODO this gets called on init, changing the option without an explicit call for that
		this.options.active = index;
		// call clickHandler with custom event
		var active = this._findActive( index )[ 0 ];
		this._clickHandler( { target: active }, active );

		return this;
	},

	_findActive: function( selector ) {
		return selector
			? typeof selector === "number"
				? this.headers.filter( ":eq(" + selector + ")" )
				: this.headers.not( this.headers.not( selector ) )
			: selector === false
				? $( [] )
				: this.headers.filter( ":eq(0)" );
	},

	// TODO isn't event.target enough? why the separate target argument?
	_clickHandler: function( event, target ) {
		var options = this.options;
		if ( options.disabled ) {
			return;
		}

		// called only when using activate(false) to close all parts programmatically
		if ( !event.target ) {
			if ( !options.collapsible ) {
				return;
			}
			this.active
				.removeClass( "ui-state-active ui-corner-top" )
				.addClass( "ui-state-default ui-corner-all" )
				.children( ".ui-icon" )
					.removeClass( options.icons.headerSelected )
					.addClass( options.icons.header );
			this.active.next().addClass( "ui-accordion-content-active" );
			var toHide = this.active.next(),
				data = {
					options: options,
					newHeader: $( [] ),
					oldHeader: options.active,
					newContent: $( [] ),
					oldContent: toHide
				},
				toShow = ( this.active = $( [] ) );
			this._toggle( toShow, toHide, data );
			return;
		}

		// get the click target
		var clicked = $( event.currentTarget || target ),
			clickedIsActive = clicked[0] === this.active[0];

		// TODO the option is changed, is that correct?
		// TODO if it is correct, shouldn't that happen after determining that the click is valid?
		options.active = options.collapsible && clickedIsActive ?
			false :
			this.headers.index( clicked );

		// if animations are still active, or the active header is the target, ignore click
		if ( this.running || ( !options.collapsible && clickedIsActive ) ) {
			return;
		}

		// find elements to show and hide
		var active = this.active,
			toShow = clicked.next(),
			toHide = this.active.next(),
			data = {
				options: options,
				newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
				oldHeader: this.active,
				newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
				oldContent: toHide
			},
			down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );

		// when the call to ._toggle() comes after the class changes
		// it causes a very odd bug in IE 8 (see #6720)
		this.active = clickedIsActive ? $([]) : clicked;
		this._toggle( toShow, toHide, data, clickedIsActive, down );

		// switch classes
		active
			.removeClass( "ui-state-active ui-corner-top" )
			.addClass( "ui-state-default ui-corner-all" )
			.children( ".ui-icon" )
				.removeClass( options.icons.headerSelected )
				.addClass( options.icons.header );
		if ( !clickedIsActive ) {
			clicked
				.removeClass( "ui-state-default ui-corner-all" )
				.addClass( "ui-state-active ui-corner-top" )
				.children( ".ui-icon" )
					.removeClass( options.icons.header )
					.addClass( options.icons.headerSelected );
			clicked
				.next()
				.addClass( "ui-accordion-content-active" );
		}

		return;
	},

	_toggle: function( toShow, toHide, data, clickedIsActive, down ) {
		var self = this,
			options = self.options;

		self.toShow = toShow;
		self.toHide = toHide;
		self.data = data;

		var complete = function() {
			if ( !self ) {
				return;
			}
			return self._completed.apply( self, arguments );
		};

		// trigger changestart event
		self._trigger( "changestart", null, self.data );

		// count elements to animate
		self.running = toHide.size() === 0 ? toShow.size() : toHide.size();

		if ( options.animated ) {
			var animOptions = {};

			if ( options.collapsible && clickedIsActive ) {
				animOptions = {
					toShow: $( [] ),
					toHide: toHide,
					complete: complete,
					down: down,
					autoHeight: options.autoHeight || options.fillSpace
				};
			} else {
				animOptions = {
					toShow: toShow,
					toHide: toHide,
					complete: complete,
					down: down,
					autoHeight: options.autoHeight || options.fillSpace
				};
			}

			if ( !options.proxied ) {
				options.proxied = options.animated;
			}

			if ( !options.proxiedDuration ) {
				options.proxiedDuration = options.duration;
			}

			options.animated = $.isFunction( options.proxied ) ?
				options.proxied( animOptions ) :
				options.proxied;

			options.duration = $.isFunction( options.proxiedDuration ) ?
				options.proxiedDuration( animOptions ) :
				options.proxiedDuration;

			var animations = $.ui.accordion.animations,
				duration = options.duration,
				easing = options.animated;

			if ( easing && !animations[ easing ] && !$.easing[ easing ] ) {
				easing = "slide";
			}
			if ( !animations[ easing ] ) {
				animations[ easing ] = function( options ) {
					this.slide( options, {
						easing: easing,
						duration: duration || 700
					});
				};
			}

			animations[ easing ]( animOptions );
		} else {
			if ( options.collapsible && clickedIsActive ) {
				toShow.toggle();
			} else {
				toHide.hide();
				toShow.show();
			}

			complete( true );
		}

		// TODO assert that the blur and focus triggers are really necessary, remove otherwise
		toHide.prev()
			.attr({
				"aria-expanded": "false",
				"aria-selected": "false",
				tabIndex: -1
			})
			.blur();
		toShow.prev()
			.attr({
				"aria-expanded": "true",
				"aria-selected": "true",
				tabIndex: 0
			})
			.focus();
	},

	_completed: function( cancel ) {
		this.running = cancel ? 0 : --this.running;
		if ( this.running ) {
			return;
		}

		if ( this.options.clearStyle ) {
			this.toShow.add( this.toHide ).css({
				height: "",
				overflow: ""
			});
		}

		// other classes are removed before the animation; this one needs to stay until completed
		this.toHide.removeClass( "ui-accordion-content-active" );
		// Work around for rendering bug in IE (#5421)
		if ( this.toHide.length ) {
			this.toHide.parent()[0].className = this.toHide.parent()[0].className;
		}

		this._trigger( "change", null, this.data );
	}
});

$.extend( $.ui.accordion, {
	version: "1.8.16",
	animations: {
		slide: function( options, additions ) {
			options = $.extend({
				easing: "swing",
				duration: 300
			}, options, additions );
			if ( !options.toHide.size() ) {
				options.toShow.animate({
					height: "show",
					paddingTop: "show",
					paddingBottom: "show"
				}, options );
				return;
			}
			if ( !options.toShow.size() ) {
				options.toHide.animate({
					height: "hide",
					paddingTop: "hide",
					paddingBottom: "hide"
				}, options );
				return;
			}
			var overflow = options.toShow.css( "overflow" ),
				percentDone = 0,
				showProps = {},
				hideProps = {},
				fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
				originalWidth;
			// fix width before calculating height of hidden element
			var s = options.toShow;
			originalWidth = s[0].style.width;
			s.width( parseInt( s.parent().width(), 10 )
				- parseInt( s.css( "paddingLeft" ), 10 )
				- parseInt( s.css( "paddingRight" ), 10 )
				- ( parseInt( s.css( "borderLeftWidth" ), 10 ) || 0 )
				- ( parseInt( s.css( "borderRightWidth" ), 10) || 0 ) );

			$.each( fxAttrs, function( i, prop ) {
				hideProps[ prop ] = "hide";

				var parts = ( "" + $.css( options.toShow[0], prop ) ).match( /^([\d+-.]+)(.*)$/ );
				showProps[ prop ] = {
					value: parts[ 1 ],
					unit: parts[ 2 ] || "px"
				};
			});
			options.toShow.css({ height: 0, overflow: "hidden" }).show();
			options.toHide
				.filter( ":hidden" )
					.each( options.complete )
				.end()
				.filter( ":visible" )
				.animate( hideProps, {
				step: function( now, settings ) {
					// only calculate the percent when animating height
					// IE gets very inconsistent results when animating elements
					// with small values, which is common for padding
					if ( settings.prop == "height" ) {
						percentDone = ( settings.end - settings.start === 0 ) ? 0 :
							( settings.now - settings.start ) / ( settings.end - settings.start );
					}

					options.toShow[ 0 ].style[ settings.prop ] =
						( percentDone * showProps[ settings.prop ].value )
						+ showProps[ settings.prop ].unit;
				},
				duration: options.duration,
				easing: options.easing,
				complete: function() {
					if ( !options.autoHeight ) {
						options.toShow.css( "height", "" );
					}
					options.toShow.css({
						width: originalWidth,
						overflow: overflow
					});
					options.complete();
				}
			});
		},
		bounceslide: function( options ) {
			this.slide( options, {
				easing: options.down ? "easeOutBounce" : "swing",
				duration: options.down ? 1000 : 200
			});
		}
	}
});

})( jQuery );

Hi All,
So i have been trying over the past few weeks (among other things) to get this menu figured out. I would really appreciate some advice/help/direction with this... Please see attached pic... what i have is three elements: "Home" "Services" "Contact". What i want is on page load they are all 100px wide... now whenever user hovers over an item it expands to be 200px wide while the other two shrink to 50px... remove hover they revert to original... I am not too familiar with javascript as i mainly use C# to do the tasks normally done by javascript (i work on asp.net platform)... i have presented a similar question to this in ajax section (thinkin that what i had was an ajax work around) but upon further reading of sources i think that is not really what i want... I am unsure where to begin and what to do... i know i need to set up a function and i have the math part figured out (i think)... i guess what i am really unclear as to whether this is a modification to the accordion menu frame... the issues i see are that i do not want the menu to have a traditional "content" area that collapses; i want the menu "headers" to expand... i also need them to expand horizontally not vertically... i am not looking for someone to "do this" for me; i am looking for advice and guidance... possibly a link to a tutorial? i have tried this but it does not work right... i can revisit it (possibly type-Oed something) but i havent because it is not really what i am looking for

Hi All,

I want an accordion menu and which is as follows

1.it should be a vertical accordion menu
2.every menu should display with image and link
3.if i click on image or link then only menu should display or open to show sub menu otherwise it should not display.

Please tell the solution for the above

ThanksAhead
Venkat

Hi All,

Does anyone know of any good horizontal accordion scripts that use jquery, like this one:

http://www.slidedeck.com/

I would like something very similar to that but unfortunately the free version is as customizable as I need it to be.

I've done a Google search but found nothing as of yet...

Thanks,

Greens85

Hello people,

I got a problem. This is the code for hiding en showing informatie in an acordion. It looks fine and it works!

But it only handles one div! The main thing i want is that when i click on the text "button" the next div, with all the span's within it, has to slide under.

Example:

HTML: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Accordion 1</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
	
                $(".accordion h3:first").addClass("active"); 
                $(".accordion div:not(:first)").hide();
                $(".accordion div").hide();
                $(".accordion p").hide();



                $(".accordion h3").click(function(){
                    $(this).next("div").slideToggle("slow").siblings("div:visible").slideUp("slow");
                    $(this).toggleClass("active");
                    $(this).siblings("h3").removeClass("active");
                    $(".accordion p").show();
                    $(".accordion .button").show();
                });
            });
        </script>
        <link rel="stylesheet" href="css/style.css" type="text/css"/>
    </head>

    <body>

        <div class="accordion">
            <h3>Title</h3> 
            <div class="test">
                <p>subtext</p>
                <div class="button"> <a href="" title="">Button</a> </div>
            </div>
            <div>
                <span style="display:block; height: 20px; width: 220px; margin-top: 10px; margin-left: -5px;"><input type="radio" checked="checked" value="" name="" id="" /><label for="">test</label></span>
                <span style="display:block; height: 20px; width: 220px; margin-top: 0px; margin-left: -5px; margin-bottom: 20px;"><input type="radio" value="" name="" id="" /><label for="">test</label></span>
                <span style="font-weight:bold;">Vanaf<input type="text" style="width: 20px; height: 15px;" class="" value="1" readonly=""></input>-<input type="text" style="width: 20px; height: 15px;" class="" value="" readonly=""></input>-<input type="text" style="width: 40px; height: 15px;" class="" value="1" readonly=""></input> change to  <input type="text" style="width: 20px; height: 10px;" class="" value="" readonly=""></input>%</span>
                <span style="display:block; text-align: right; text-decoration:underline; font-weight:bold; color: red;">count</span>
            </div>        
        </div>
    </body>
</html>

CSS:
Code:

body {
	margin: 10px auto;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
	width: 480px;
	border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
	background: #004584;
	padding: 7px 15px;
	margin: 0;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
        color: #FFFFFF;
}
.accordion h3:hover {
	background-color: #00AEE7;
}
.accordion h3.active {
	background-position: right 5px;
}
.accordion .test {
	background: #DFF7FF;
	margin: 0;
	padding: 10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}

.accordion .extra {
	background: #DFF7FF;
	margin: 0;
	padding: 10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}

Hey everyone. If you go he Code:

http://store.inspirationsdancewear.com/?xls_offlinekey=4888254

you will see an "accordion" navigation on the left side. It opens and contracts like it should, HOWEVER I need to add the following functionality.

1. I want to have ONLY 1 "parent" category displaying it's "child" categories at a time. So when I open another "parent" link, I want the previous one to collapse, so only 1 accordion is open at a time (right now you are able to open all of them without the other ones collapsing).

2. When I select a "child" category from the "parent" category, I need the menu to stay open when going to the "child" category page and I also need the relevant "child" category to be "highlighted" so the user knows which page they are on.

Please let me know if you can help me with any of this. I would GREATLY appreciate it!!

PHP Code:
<script type="text/javascript">
    //----------------------------NAVIGATION DROPDOWN------------------------------------//
sfHover = function() {
        var sfEls = document.getElementById("left").getElementsByTagName("h2");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    
function initMenu() {
          $('#left div').hide();
          $('#left h2').click(
            function() {
                $(this).next().slideToggle('normal');    
              }
            );
          }
        $(document).ready(function() {initMenu();});
        
</script>

<?php

function print_childs($categ){
    
    $childs = $categ->categ_childs;
    
    if(!$childs || (count($childs) == 0)){
        echo "</a>";
        return;
    }
        
        echo "&raquo;</a><ul>\n";
    foreach($childs as $category){
        
        if(!$category->HasChildOrProduct())
            continue;
        
        ?>
        
<li><a class="childcats" href="<?= $category->Link; ?>"><?= $category->Name; ?><?php print_childs($category); ?></a></li>
        <?php
        
    }
    echo "</ul><br/>\n";
    
    
}

?>
<div id="leftwrapper">

<h2 style="margin-top:-25px; padding-bottom:15px; color:#900; margin-left:15px; font-size:1.2em">Shop Online</h2>

        <div id="left">        
                    
<?php foreach($this->menu_categories as $category):  ?>    
<h2 class="headings"> <?= $category->Name; ?></h2>


<div>
<a class="childcats" href="<?= $category->Link; ?>">  See all <?= $category->Name; ?> <?php print_childs($category); ?></a>

                            
    </div>                        
                            
<?php endforeach; ?>
                    
<?php if(_xls_get_conf('ENABLE_FAMILIES', 1)): ?>                                
<?php $families = Family::LoadAll();?>
<?php foreach($families as $family): ?>
<a href="index.php?family=<?= $family->Family ?>"><?= $family->Family ?></a>
<?php endforeach; ?>
                                
                                
                        <?php endif; ?>
                        
        </div>                
    
        </div>

I’m trying to implement a JavaScript that creates an accordion menu. As the script currently stands, your able to tell the first list within the menu to expand when the page loads. You do this by adding .expandfirst into the ul class tag.

My question is... Does anyone know how to edit the JavaScript so that I can also tell the menu (on some pages) to expand the second or third list? I only need one list to be expanded at any one time. Here's the script...

Code:

function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){
		$('#' + this.id + '.expandfirst ul:first).show();
	});
	$('ul.menu li a').click(
		function() {
			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if($('#' + parent).hasClass('noaccordion')) {
				$(this).next().slideToggle('normal');
				return false;
			}
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').slideUp('normal');
				checkElement.slideDown('normal');
				return false;
			}
		}
	);
}
$(document).ready(function() {initMenus();});

Hope someone can help!?

I have this accordion : accordion example

I want to separate each item into 3 columns. I tried using table but it doesn't work (it made the text not clickable).

Any idea how?

Thank you

Hi, I mainly do PHP/MySQL coding, but I wanted to add this Javascript Accordion Menu to my site:

Javascript And CSS Tutorial - Accordion Menus | Switch on the Code

It works fine, but I was wondering if there was a simple way to modify the code so that the currently open menu stays open from page to page instead of closing upon each page reload?

Thanks for the help,

--Anamaniac

Howdy Community,

I have spent the past 4 hours strait looking for and trying to modify an accordion style vertical menu who's elements slide out of the top and up instead of the normal slide out of the bottom and down action.

I would like it in jQuery, but at this point I will take any library. Thanks for your help. I know some have wondered "What have you tried making work".. jQuery Tools, Jquery UI and about 3 other scripts that looked updateable. All I couldn't get to work.

I also made an attempt to fake an accordion using show/hide toggles and this sorta worked, but it didnt have the nice slide as well as my data didnt move on page in the right direction. Headache!!!

Help!! Thanks, Cesar

Hi everyone, I have followed David Power's tutorial on linking to specific tabs in an Accoridion widget.

I have got a test page working: http://fuelrecruitmenttest.co.uk/linktest.html which links to specific stories on my news page.

My problem is, I'm adding news stories in the accordion panel, so the newest story goes on the top.

Javascript counts the top panel as 0, the second panel as 1 etc etc.

So if I was to add a new panel, any previous links I have to the top panel would be to the wrong story.

My question is, Is there anyway of counting from the bottom panel up? Or any other workaround that people can think of eg: giving each panel a unique identifier so that the links remain the same even when new stories are added.

Thanks!