PLEASE help with adding a second Moo Accordion

AshleyQuick · #1 (**permalink**) 02-23-09, 05:26 AM

Code:

<script type="text/javascript">
	window.addEvent('domready', function() {

		//make the accordion
		var accordion = new Accordion($$('.toggler'),$$('.element'), {
			opacity: 0,
			onActive: function(toggler) { toggler.setStyle('color', '#0072BC'); },
			onBackground: function(toggler) { toggler.setStyle('color', '#222'); }
		});

		//make it open on hover
		$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });


	});
	</script>

</head>
<body>

<div id="accordion">
<h4 class="toggler">Hover</h4>
<div class="element">
Content
</div>
</div>

This is the code for the first. I need to add another that is independent of this. Help?

Yeroon · #2 (**permalink**) 02-23-09, 05:39 AM

This maybe:

Code:

<script type="text/javascript">
	window.addEvent('domready', function() {

		//make the accordion
		var accordion = new Accordion($$('.toggler'),$$('.element'), {
			opacity: 0,
			onActive: function(toggler) { toggler.setStyle('color', '#0072BC'); },
			onBackground: function(toggler) { toggler.setStyle('color', '#222'); }
		});

		//make it open on hover
		$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });


	});

window.addEvent('domready2', function() {

		//make the accordion
		var accordion2 = new Accordion($$('.toggler2'),$$('.element2'), {
			opacity: 0,
			onActive: function(toggler2) { toggler2.setStyle('color', '#0072BC'); },
			onBackground: function(toggler2) { toggler2.setStyle('color', '#222'); }
		});

		//make it open on hover
		$$('.toggler2').addEvent('mouseenter', function() { this.fireEvent('click'); });


	});
	</script>

</head>
<body>

<div id="accordion">
<h4 class="toggler">Hover</h4>
<div class="element">
<h4 class="toggler2">Hover2</h4>
<div class="element2">
Content
</div>
</div>

Even more sliders? Look here: http://www.programmingtalk.com/showthread.php?t=49138

AshleyQuick · #3 (**permalink**) 02-23-09, 06:12 AM

Thanks. A minor tweak got it working but any idea how to make it close on mouseleave?

Code:

<script type="text/javascript">
window.addEvent('domready', function() {

	//make the accordion
	var accordion = new Accordion($$('.toggler'),$$('.element'), {
		opacity: 0,
		onActive: function(toggler) { toggler.setStyle('color', '#0072BC'); },
		onBackground: function(toggler) { toggler.setStyle('color', '#222'); }
	});

	//make it open on hover
	$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });


});
window.addEvent('domready', function() {

	//make the accordion
	var MyAccordion = new Accordion($$('.MyAcctoggler'),$$('.MyAccelement'), {
		display: -1,
		opacity: 0,
		onActive: function(MyAcctoggler) { MyAcctoggler.setStyle('color', '#0072BC'); },
		onBackground: function(MyAcctoggler) { MyAcctoggler.setStyle('color', '#222'); }
	});

	//make it open on hover
	$$('.MyAcctoggler').addEvent('mouseenter', function() { this.fireEvent('click'); });


});
</script>

Yeroon · #4 (**permalink**) 02-23-09, 06:40 AM

If it closes when you click an opened one again you can do it like this I think. Got the openClose: true from the samples on the Moo website.:

Code:

<script type="text/javascript">
window.addEvent('domready', function() {

	//make the accordion
	var accordion = new Accordion($$('.toggler'),$$('.element'), {
		opacity: 0,
		onActive: function(toggler) { toggler.setStyle('color', '#0072BC'); },
		onBackground: function(toggler) { toggler.setStyle('color', '#222'); }
		openClose : true;
	});

	//make it open on hover
	$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });
	//make it close on mouseleave
	$$('.toggler').addEvent('mouseleave', function() { this.fireEvent('click'); });

});
window.addEvent('domready', function() {

	//make the accordion
	var MyAccordion = new Accordion($$('.MyAcctoggler'),$$('.MyAccelement'), {
		display: -1,
		opacity: 0,
		onActive: function(MyAcctoggler) { MyAcctoggler.setStyle('color', '#0072BC'); },
		onBackground: function(MyAcctoggler) { MyAcctoggler.setStyle('color', '#222'); }
		openClose : true;
	});

	//make it open on hover
	$$('.MyAcctoggler').addEvent('mouseenter', function() { this.fireEvent('click'); 
	//make it close on mouseleave
	$$('.toggler').addEvent('mouseleave', function() { this.fireEvent('click'); });
});


});
</script>