JavaScript - Get Accordion Menu To Stay Open...

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!?

Hey,

I'm having trouble with this site http://bit.ly/hL0u0w...

If you go to the services section you will see a sub navigation on the left of the box. The idea of this is to have sub sections within the main headings that expand/collapse when selected. Insted when any one link is clicked the whole menu expands and not just the related sub sections.

This is the javascript

Quote:
<script type="text/javascript">
$(document).ready (function() {
$('#link1').click(function() {
$('.slide').slideToggle('fast'); });
$('.close').click(function() {
$('.slide').slideUp('fast'); });

$(document).ready (function() {
$('#link2').click(function() {
$('.slide').slideToggle('fast'); });
$('.close').click(function() {
$('.slide').slideUp('fast'); });
});
$(document).ready (function() {
$('#link3').click(function() {
$('.slide').slideToggle('fast'); });
$('.close').click(function() {
$('.slide').slideUp('fast'); });
});
});
</script>

and here is the html

Quote:
<div id="subnav4">
<ul class="navigation4 pagination">

<li class="tab4"><a rel="1" id="link1" href="#">heading 1</a></li>
<li style="display: none;" class="dome slide"><a href="#">corporate id</a></li>
<li style="display: none;" class="dome slide"><a href="#">branding</a></li>
<li style="display: none;" class="dome slide"><a href="#">brochures</a></li>
<li style="display: none;" class="dome slide"><a href="#">direct mail</a></li>

<li class="tab4"><a id="link2" href="#">heading 2</a></li>
<li style="display: none;" class="dome slide"><a href="#">email marketing</a></li>
<li style="display: none;" class="dome slide"><a href="#">websites</a></li>


<li class="tab4"><a id="link3" href="#">heading 3</a></li>
<li style="display: none;" class="dome slide"><a href="#">advertising</a></li>
<li style="display: none;" class="dome slide"><a href="#">audiovisual</a></li>

<li class="tab4"><a id="heading 3" href="#">exhibitions</a></li>

</ul>
</div>
Hope someone can help with this!

Many thanks!

Hi,

I have a browser related problem that affects my accordion menu. I used a menu from dynamic drive:

http://www.dynamicdrive.com/dynamici...enu-bullet.htm

Only one of 4 headers in the menu expand, and that has another level inside.

The issue is that in safari, when you click on 'portfolio' to expand and load a page, when the page loads the menu fully collapses, rather than staying open with the sub menu visible. I have tried increasing the delay between opening the menu and then navigating to the page, but this hasn't helped.

this is a link to the site, to see desired behavior firefox does a good job.

http://www.wadmanlimited.co.uk/bestudioweb

thanks for any help.

Hello there guys!

Thanks for taking time to view this thread. It's appriciated!

I found a really nice menu (Javascript, JQuery) im not so high tech on this myself, and not the best coder either but whenever I use this menu it gives the login box on the website an error, it doesn't let people login..

I've tried to localize the error myself, but I just dont know how to fix it, I think the issue is that the site system i use doesn't support these type of scripts which gives the login errors! I'm currently using a free website system, which allows you to customize anything you want called "uCoz"

The menu i used was: http://www.dynamicdrive.com/dynamici...enu-glossy.htm

And I think it's the jquery that gives the login box errors..

I'm thankfull for answers if anyone knows

I would like to create a 2-level menu similar to the one use in: http://www.pagina12.com.ar/diario/principal/index.html
It is done with CSS?
Thanks!

I have a menu that lists all the categories and sub categories, when someone clicks a main category it opens up the sub cats for it. if someone clicks one of the sub cats the page open up to show all items in that category.

But what I would like to find out is how do I get the menu to open up as it was so it shows the category and sub category open?

Code:

			  <!-- start show cat list -->
			  			  <br><div style="font-weight: bold; font-size: 0.825em; padding: 0em 0em 0.3125em;">Select items by category</div>
			  <ul class="catMenuItem">
	<li><a style="background-image: url(&quot;images/triangle_down.gif&quot;);" href="#" class="titleTriangle"><span>cat1</span></a></li>
		<li style="display: block;" class="catSubMenu">
			<a href="?cat=2">sub 1-2</a> (0)<br>
			<a href="?cat=7">sub 1-3</a> (2)<br>
			<a href="?cat=8">sub 1-4</a> (0)<br>
			<a href="?cat=9">sub 1-5</a> (0)<br>
			<br>
		</li>
</ul>
<ul class="catMenuItem">
	<li><a href="#" class="titleTriangle"><span>cat2</span></a></li>
		<li style="display: none;" class="catSubMenu">
			<a href="?cat=3">sub 2-1</a> (0)<br>
			<a href="?cat=4">sub 2-2</a> (0)<br>
			<a href="?cat=5">sub 2-3</a> (0)<br>
			<a href="?cat=6">sub 2-4</a> (1)<br>
			<br>
		</li>
</ul>
<ul class="catMenuItem">
	<li><a href="#" class="titleTriangle"><span>cat3</span></a></li>
		<li style="display: none;" class="catSubMenu">
			<br>
		</li>
</ul>
<ul class="catMenuItem">
	<li><a href="#" class="titleTriangle"><span>cat4</span></a></li>
		<li style="display: none;" class="catSubMenu">
			<br>
		</li>
</ul>
<ul class="catMenuItem">
	<li><a href="#" class="titleTriangle"><span>cat5</span></a></li>
		<li style="display: none;" class="catSubMenu">
			<br>
		</li>
</ul>
<script type="text/javascript"><!--
/*		Categories Menu START	*/
    var prevCat;

    function menu(newCat) {
		var mens;
		var anchors;
        if (prevCat) {
			mens = prevCat.parentNode.getElementsByTagName('li')[0];
			anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_right.gif)';
			prevCat.style.display = 'none';
		}
		
		if (newCat != prevCat) {
			mens = newCat.parentNode.getElementsByTagName('li')[0];
			anchors = mens.getElementsByTagName('a')[0].style.backgroundImage='url(images/triangle_down.gif)';
			newCat.style.display = 'block';
			prevCat = newCat;
		} else {
			prevCat = null;
		}
		
    }

    onload = function() {
        var menus = document.getElementsByTagName('ul');
        for (var a=0,x=menus.length; a<x; a++) {
            if (menus[a].className === 'catMenuItem') {
                menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
                    menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
                }
                menus[a].getElementsByTagName('li')[1].style.display = 'none';
            }
        }
    } 

/*		Categories Menu END		*/
--></script>
			  <!-- end show cat list -->

Hello everyone,

For some reason this jQuery/JavaScript code will not show my sub menus in my navigation bar. Here is the JavaScript:

Code:

$(function(){

    var config = {    
         sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
         interval: 200,  // number = milliseconds for onMouseOver polling interval    
         over: doOpen,   // function = onMouseOver callback (REQUIRED)    
         timeout: 200,   // number = milliseconds delay before onMouseOut    
         out: doClose    // function = onMouseOut callback (REQUIRED)    
    };
    
    function doOpen() {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }
 
    function doClose() {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    }

    $("ul.pMenu li").hoverIntent(config);
    
    $("ul.pMenu li ul li:has(ul)").find("a:first").append(" » ");

});

My css that corresponds to this is:

Code:

.pMenu{
	margin:0;
	padding:0;
}

#health{
	width:10%;
	padding-left:14%;
	padding-right:2%;
}

#insurance{
	width:13%;
	padding-right:2%;
}

#shopping{
	width:12%;	
	padding-right:2%;
}

#dating{
	width:10%;
	padding-right:2%;
}

#education{
	width:13%;
}

ul.pMenu li{
	float:left;
	list-style:none;
}

ul.pMenu li a{
	display:block;
	color:#FFF;
	background:#900;
	border:3px ridge #C00;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	white-space:nowrap;
	padding-left:2%;
	padding-right:2%;
	padding-top:10px;
	padding-bottom:10px;
}

ul.pMenu li a:hover{
	background:#FF0;
	border:3px ridge #FF6;
	color:#FF0;
}

ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li a{
	width:auto;
	background:#CCC;
	border:1% outset #999;
	font-size:95%;
	padding:2%;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
	border-right:none;
	width:100%;
	display:inline-block;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li ul li{
	float:none;
	display:inline;
}

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}

Hello,

I've tried various things I've found online but cannot seem to get the right code to open the links in a drop down menu in a new window.

Code:

<form id="quicklinks" name="quicklinks" action="">
<select name="quicklinkitem" onchange="openWin(quicklinkitem.value)">

<option value="/lib/board.html">Select a Date</option>

<option value="/lib/boardreports/03-08-12.pdf">March 8, 2012</option>
                        
<option value="/lib/boardreports/02-09-12.pdf">February 9, 2012</option>	  </select>
</form>

I appreciate any help. Elbee

Using onclick=window.open function in js to open a pdf file link in a new popup window.

Works fine to display the file onscreen, but not if the user wants to save the file client-side to their computer.

The right-hand-button context menu for the mouse will allow the user to download, but the file saved will be a html dump file for the webpage
and the name of the file will be that for the webpage.
Of course I can use the easy <a href> method for download links and the mouse context menu options will be as expected,
but I can only use target="-blank" or target="_self" .
I need a popup window to open.

Could use :
oncontextmenu="alert('Left click the link to open, and then SAVE from with the pdf viewer')
to advise users how to save the file, and could use
"javascript: void(0)"
to eliminate most mouse context menu options, so the user won't bother try.

So how can I get a link to a file which can be viewed in a popup window and downloaded using mouse right-hand context menu?

Any advice massively appreciated!

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 everyone, I was hoping you could help me with a faily easy question.
I was asked to edit some script and I figured out most of it, however I can't seem to be able to make the links in my java script menu open in new pages.

Any help would be appreciated. Below is a copy of the script.

It's a very long script, so I just sent a section of it. Pleasse scroll down to the bottom to see where the links are (ex. http://www.korg.com, etc)

Thank you, Paul.



<!--
function mmLoadMenus() {
if (window.mm_menu_1107110519_0) return;
window.mm_menu_1107110519_0 = new Menu("root",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true);
mm_menu_1107110519_0.addMenuItem("Parts&nbsp;Department","location='/e/support/accessories.html'");
mm_menu_1107110519_0.addMenuItem("Warranty&nbsp;Registration","location='/e/support/warranty.html'");
mm_menu_1107110519_0.addMenuItem("F.A.Qs","location='/e/support/faqs.html'");
mm_menu_1107110519_0.addMenuItem("Tutorials&nbsp;&amp;&nbsp;Guides","location='/e/support/tutorials.html'");
mm_menu_1107110519_0.addMenuItem("Related&nbsp;Products","location='/e/support/related_products.html'");
mm_menu_1107110519_0.addMenuItem("Downloads","location='/e/support/downloads.html'");
mm_menu_1107110519_0.addMenuItem("Newsletter","location='/e/support/newsletter.html'");
mm_menu_1107110519_0.addMenuItem("Owner&rsquo;s&nbsp;Manual","location='/e/support/manual_request.html'");
mm_menu_1107110519_0.addMenuItem("Korg Proview Request","location='/e/support/literature_request.html'");
mm_menu_1107110519_0.addMenuItem("Suggested Retail Prices","location='/e/products/pricelists.html'");
mm_menu_1107110519_0.hideOnMouseOut=true;
mm_menu_1107110519_0.menuBorder=1;
mm_menu_1107110519_0.menuLiteBgColor='#2a4960';
mm_menu_1107110519_0.menuBorderBgColor='#000000';
mm_menu_1107110519_0.bgColor='#000000';
window.mm_menu_1107105559_0_1 = new Menu("KORG",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true);
mm_menu_1107105559_0_1.addMenuItem("KORG.com","location='http://www.korg.com'");
mm_menu_1107105559_0_1.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'");

mm_menu_1107105559_0_1.hideOnMouseOut=true;
mm_menu_1107105559_0_1.menuBorder=1;
mm_menu_1107105559_0_1.menuLiteBgColor='#2a4960';
mm_menu_1107105559_0_1.menuBorderBgColor='#000000';
mm_menu_1107105559_0_1.bgColor='#000000';
window.mm_menu_1107105559_0_2 = new Menu("VOX",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true);

mm_menu_1107105559_0_2.addMenuItem("VOX.co.uk","location='http://www.voxamps.co.uk'");
mm_menu_1107105559_0_2.addMenuItem("VOX online Newsletter","location='http://www.f3studios.com/vox'");
mm_menu_1107105559_0_2.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'");

mm_menu_1107105559_0_2.hideOnMouseOut=true;
mm_menu_1107105559_0_2.menuBorder=1;
mm_menu_1107105559_0_2.menuLiteBgColor='#2a4960';
mm_menu_1107105559_0_2.menuBorderBgColor='#000000';
mm_menu_1107105559_0_2.bgColor='#000000';
window.mm_menu_1107105559_0_3 = new Menu("SAMSON",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true);

mm_menu_1107105559_0_3.addMenuItem("SAMSON WIRELESS","location='http://www.samsontech.com/products/brandpage.cfm?brandID=1'");
mm_menu_1107105559_0_3.addMenuItem("SAMSON AUDIO","location='http://www.samsontech.com/products/brandpage.cfm?brandID=2'");
mm_menu_1107105559_0_3.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'");

mm_menu_1107105559_0_3.hideOnMouseOut=true;
mm_menu_1107105559_0_3.menuBorder=1;
mm_menu_1107105559_0_3.menuLiteBgColor='#2a4960';
mm_menu_1107105559_0_3.menuBorderBgColor='#000000';
mm_menu_1107105559_0_3.bgColor='#000000';
window.mm_menu_1107105559_0_3a = new Menu("HARTKE",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true);

mm_menu_1107105559_0_3a.addMenuItem("HARTKE","location='http://www.samsontech.com/products/brandpage.cfm?brandID=3'");
mm_menu_1107105559_0_3a.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'");

mm_menu_1107105559_0_3a.hideOnMouseOut=true;
mm_menu_1107105559_0_3a.menuBorder=1;
mm_menu_1107105559_0_3a.menuLiteBgColor='#2a4960';
mm_menu_1107105559_0_3a.menuBorderBgColor='#000000';
mm_menu_1107105559_0_3a.bgColor='#000000';
window.mm_menu_1107105559_0_4 = new Menu("LIGHTSNAKE",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true);

mm_menu_1107105559_0_4.addMenuItem("LIGHTSNAKE","location='http://www.soundtech.com'");
mm_menu_1107105559_0_4.addMenuItem("Pricelist","location='http://www.korgcanada.com/e/products/pricelists.html'");

mm_menu_1107105559_0_4.hideOnMouseOut=true;
mm_menu_1107105559_0_4.menuBorder=1;
mm_menu_1107105559_0_4.menuLiteBgColor='#2a4960';
mm_menu_1107105559_0_4.menuBorderBgColor='#000000';
mm_menu_1107105559_0_4.bgColor='#000000';


window.mm_menu_1107105559_0 = new Menu("root",150,17,"Verdana, Arial, Helvetica, sans-serif",11,"#92c4f5","#2a495f","#2a495f","#99ccff","left","middle",3,0,500,0,0,true,true,true,0,false ,true);
mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_1,"location='http://www.korg.com'");
mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_2,"location='http://www.voxamps.co.uk'");
mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_3,"location='http://www.samsontech.com'");
mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_3a,"location='http://www.samsontech.com/products/brandpage.cfm?brandID=3'");
mm_menu_1107105559_0.addMenuItem(mm_menu_1107105559_0_4,"location='http://www.soundtech.com'");

mm_menu_1107105559_0.addMenuItem("Promotions","location='/e/promotions.html'");
mm_menu_1107105559_0.addMenuItem("Suggested Retail Prices","location='/e/products/pricelists.html'");

mm_menu_1107105559_0.hideOnMouseOut=true;
mm_menu_1107105559_0.childMenuIcon="/images/nav/arrows.gif";
mm_menu_1107105559_0.menuBorder=1;
mm_menu_1107105559_0.menuLiteBgColor='#2a4960';
mm_menu_1107105559_0.menuBorderBgColor='#000000';
mm_menu_1107105559_0.bgColor='#000000';

mm_menu_1107105559_0.writeMenus();
} // mmLoadMenus()

//-->

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

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>

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;
}

I am working on a custom accordion. A type 2 accordion works but type 1 and 3 don't work. Does anyone know how to correct this syntax?

Also, if you see any ways to make this code better, please post your fixes in this post
Code:

/*
To use these, insert your content between a div tag.
For example:
<div id="2011" style="display: none">
This is the content in the accordion
</div>
You can have as many of these on the page as you wish but they all must have a different div tag.
You will be creating a different button for each div tag. To make an item display on page load, change that div tag display from "none" to "inline".

For the button that toggles the accordion:
<a href="javascript:accordion('2011', '2', eventyear)">2011</a>

Here is what all of these variables do:
1. Id of the div tag you want to toggle
2. The type of accordion you want
3. Only needed if it is a type 1 or 2 accordion, this refers to an array of all of the other div id's in the accordion.

If you are using a type 1 or 2 array, create a array under the arrays comment of all of the div id's in your accordion.

Types:
1 = One open at a time. Open and close
2 = One open at a time. Open no close
3 = No limit. Open and close. 3 doesn't use an array
*/

//Arrays;
var eventyear=new Array("2011","2010","2009");
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function accordion(click,type,array) {
var click = document.getElementById(click);
if ((click.style.display = "inline") && ((type == "1") || (type == "3"))) {
	click.style.display = "none";
} else if ((click.style.display = "none") && ((type == "1") || (type == "2"))) {
	var c;
	for(c in array) {
		document.getElementById(array[c]).style.display = "none";
	}
	click.style.display = "inline";
} else if ((click.style.display = "none") && (type == "3")) {
	click.style.display = "inline";
}}