MooTools Accordion: Mouseover Style

Thanks David.

I was just contemplating the mooTools accordian for one of my projects at hand.
You’ve out-slicked yourself with this offering. Thanks for this post.

Michael

Thanks, David.

This sure is useful :)

I have been trying to get this to work for weeks now!
When I finally typed in the magic right text to Google up this page – it worked in seconds!
Many thanks
I wish it had been easier to find though, I have ben on this site for ages and missed it…
..perhaps it wasn’t there yet though!

Brilliant.. Phew.

now I have the next problem to fix!

Hey there!

i’ve just got my head around mootools (i’m a php developer, not a miracle worker, jim) and i was wondering if anyone had tried tinkering with the transition/tween fx to get the bounce effect on the open/close tabs.

also if anyone could develop a real-life ctl+z so i can undo the above obscure star trek reference, that’d be great.

kthxbai

Thanks a lot !!
I was working for a few days on this accordion without finding any solution !

Now it’s done !

Thanks again =)

hello david !
how can i do mootools accordion for style.
my code used Accordion.
don’t use fx.accordion.

Nice trick, I was about to hack the source code when I ran across this. Thanks.

Thanks for the tip. Any way of making it close automatically once the mouse moves away from the toggler?

Hi David, I’m trying to implement submenus within the accordion from your script. Whenever I click a submenu item my css is made to highlight that particular li and also go to that page. But each li in the same position in every section of the 3 accordion sections highlights. For example, if I click the first li link, it highlights and so does the first link in the second accordion tab and also the first link in the third accordion section. How would I go about isolating only the particular li link I’m interested in? Thanks ahead of time!

print(”

<script type=”text/javascript”>
// uses mootools.js
window.addEvent(‘domready’, function() {

//make the accordion
var accordion = new Accordion($$(‘.toggler’),$$(‘.element’), {
opacity: 0,
display: “1″, // set to “” for all closed
onActive: function(toggler) {
toggler.setStyle(‘color’, ‘#cccccc’);
},
onBackground: function(toggler) {
toggler.setStyle(‘color’, ‘#6c6c6c’);
}
});

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

});
</script>

<div id=”wrapper_accordion”>
<div id=”accordion”>

<h3 class=”toggler”><a href=”corpSupport.html”>CORPORATE SUPPORT</a></h3>
<div class=”element”>
<ul class=”accordion_menu_sub”>
<li><a href=”corpSupport_a.html” class=”subpg_a” >CSR Working Group</a></li>
<li><a href=”corpSupport_b.html” class=”subpg_b” >Governance</a></li>
<li><a href=”corpSupport_c.html” class=”subpg_c” >SRI Ratings</a></li>
<li><a href=”corpSupport_d.html” class=”subpg_d” >Government Relations</a></li>
</ul>
</div>

<h3 class=”toggler”><a href=”ssFoundation.html”>FOUNDATION</a></h3>
<div class=”element”>
<ul class=”accordion_menu_sub”>
<li><a href=”ssFoundation_a.html” class=”subpg_a” >ssFoundation_a</a></li>
<li><a href=”ssFoundation_b.html” class=”subpg_b” >ssFoundation_b</a></li>
<li><a href=”ssFoundation_c.html” class=”subpg_c” >ssFoundation_c</a></li>
</ul>
</div>

<h3 class=”toggler”><a href=”volunteerism.html”>VOLUNTEERISM</a></h3>
<div class=”element”>
<ul class=”accordion_menu_sub”>
<li><a href=”volunteerism_a.html” class=”subpg_a” >Volunteerism_a</a></li>
<li><a href=”volunteerism_b.html” class=”subpg_b” >Volunteerism_b</a></li>
<li><a href=”volunteerism_c.html” class=”subpg_c” >Volunteerism_c</a></li>
</ul>
</div>

</div>
</div>”);

I figured it out. It’s not a js issue, it was a css issue. For those who want to know: I just forgot to make the ‘a class’ names truly unique. For example, by having more than one ‘class=”subpg_c” it highlight all these ‘li’ tags in 3 places at once. Sorry for the long post. I thought the code might show up in a separate window rather than in the post. ;) keep up the great site!

Thanks! Not being a programmer your tutorials have helped me use mootools and add excitement to my Web site. Is there a way to set the height. I’m doing something similar to what Apple did with scriptaculous. Thanks again, you’ve been a great help.

Dave

This Accordion looks awesome. I am trying to use it for a project and am having a little difficulties getting it to work. Currently all the data shows on the page. None is collapsed and so on. Here is what I am using:

<style type=”text/css”>
.toggler { cursor:pointer; font-weight:bold; color:#000; margin: 0; padding:5px; font-size:16px; font-family:Arial, sans-serif; }
.toggler:hover { background:#eee; }
.element { padding:0 5px; }
.image { margin:10px 20px; }
</style>

<script type=”text/javascript”>
//make the accordion
var accordion = new Accordion($$(‘.toggler’),$$(‘.element’), {
opacity: 0,
onActive: function(toggler) { toggler.setStyle(‘color’, ‘#f30′); },
onBackground: function(toggler) { toggler.setStyle(‘color’, ‘#000′); }
});

//make it open on hover
$$(‘.toggler’).addEvent(‘mouseenter’, function() { this.fireEvent(‘click’); });
</script>

That is in the head of the document.

This is in the body:

<div id=”accordion”>
<h3 class=”toggler”>Unit 1</h3>
<div class=”element”>
<p>Unit 1 HTML goes here</p>
</div>
<h3 class=”toggler”>Unit 2</h3>
<div class=”element”>
<p>Unit 2 HTML goes here</p>
</div>
<h3 class=”toggler”>Unit 3</h3>
<div class=”element”>
<p>Unit 3 HTML goes here</p>
</div>
<h3 class=”toggler”>Unit 4</h3>
<div class=”element”>
<p>Unit 4 HTML goes here</p>
</div>
</div>

Thanks in advance for the help.

Hy!

Is it possible to close a tab after the mouse leaves?
Sorry for this stupid question, but i am absolutly new with this stuff!

Thanks for yor help!

I had one heck of a time getting the accordion to work where if you click it, it opens, if you click it again, it closes, if your mouse leaves the element, it closes.

<div class=”toggler”>Click Me
<div class=”element>
<ul>
<li>Showing</li>
<li>Showing Again</li>
</ul>
</div>
</div>

window.addEvent(‘domready’, function() {
var accordion = new Accordion($$(‘.toggler’),$$(‘.element’), {
display: -1,
opacity: 0,
openClose: true,
alwaysHide: true
});
});
$$(‘.element’).addEvent(‘mouseleave’, function(){ this.parentNode.fireEvent(‘click’); });

Thank you for the mouseover code on the accordian. I feel this is slightly easier and more intuitive than the click for the general public to use on the website. This has saved me a huge amount of work and will improve the look of the site. Wish I could have written it!

$$(‘.toggler’).addEvent(‘mouseenter’, function() { this.fireEvent(‘click’); });

Good work on that

Hi!

I am trying to make mootools good working with IE using you’re example for first…

but the result is http://www.voilagesdesign.fr/test

I use the latest realease of mootools but I’d try first with 1.2 and the result is the same…

any idea?

thanks for your website david, it is very enriching!

Perhaps you should add a notice that there is a accordion option called “trigger” which should do exactly what is done with your workaround. Sadly mootools implemented options which doesnt take effect.

The more im working with mootools the more i miss jQuery. Easier to use and more docs / demos / plugins.

i couldn’t find it even in mootools. You’re the man, thank’s a lot!!!

It’s wonderful the trick but i have a question, how can i link it in an iframe?

I have my accordion in a main html and i tried this: but doesn’t work.

I would appreciate it if somebody helps me.

Sorry, it get the code. I mean tried this:

[code][/code] but doesn’t work.

:s again get the code i really mean: a href=”europa0.html” target=”catalogos” with the

awesome work , but .. can u give the script some option for bounce slide ? i.ve seen that this is posible , but im noob in mootools :P . pretty tnx , waiting for your reply .

transition: Fx.Transitions.Bounce.easeOut,

this is the question :P … for me worked clear !

Hey there.

I use the mootools accordion for my website. But i just want to add a simple property. I’d like to have an accordion that opens 1 or 2 seconds after opens the website. How do i realize that? I am not familiar with Javascript, so need help!

Greets.

Very beatiful plugin thanks

Cool site, i have bookmarked it for future reference

was easy to implement. great plugin.

but.. I’m having trouble with .elements top and bottom borders. I can’t get them to display. The left and right borders show fine. Any advice?