Deutsche Version medianotions.de subscribe RSS feed

23.03.2008

MooTools: Nested accordion

Tags: JavaScript, MooTools | last edited: 30.06.2009


Update: September 3rd, 2008

First of all I want to say “Thank you!” for all the positive feedback I have received. I didn’t expect such a great response on the nested accordion. Below you find some hints on questions I am frequently asked:

Compatibility with MooTools 1.2

The nested accordion works with MooTools 1.2 without changes. I have updated the Demo and download area with versions based on MooTools 1.2.

Development and support

The nested accordion has emerged from a customer project and I am glad to share the knowhow and code with all who are interested. The code however is not developed further or expanded with new features and I also don’t offer support for it.

Usage

Please don’t use the nested accordion to build complete websites with it. Otherwise your visitors can not bookmark subsites, open them in new browser tabs or send them as links.

A short while ago I faced the challenge of realising a nested MooTools accordion which also builds up as a semantically correct HTML-DL-list. As I am more of a greenhorn when it comes to MooTools and object-orientated JavaScript programming I was in search for ready-made solutions and made a partial find in Ryan Jauregui’s blog.

Own adaptions

What was still missing was the HTML-DT-list and some JavaScript modifications in order to make the accordion match my ideas more appropriately. After giving it a go and some testing I came up with an unlimited nested accordion which gets by with DL-, DT-, and DL-tags and a handful of CSS classes. The JavaScript, however, is set-up in a way so that it does not require any adjustments when an additional nesting level is added. You will have to take the CSS classes into consideration when writing the HTML file.

The demo

The plus- and minus-icons are part of the Silk-Icon series by Mark James. The colouring is inspired by the colour set “sandy stone beach ocean diver” on Adobe’s kuler-web-application. Oh, by the way, the categories are taken from Wikipedia and, naturally, are not complete.

HTML | index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />

      <title>Nested MooTools Accordion</title>

      <!-- MooTools JS Framework | http://www.MooTools.net -->      
      <script type="text/javascript" src="MooTools-1.11.js"></script>

      <!-- Nested Accordion -->   
      <script type="text/javascript" src="functions.js"></script>

      <!-- Exemplary Styles -->
      <link href="styles.css" type="text/css" rel="stylesheet" />
   </head>

   <body>

      <h1>Nested<br> Mootols Accordion</h1>

      <dl class="accordion">
         <dt class="accordion_toggler_1">Fish</dt>
         <dd class="sub_accordion accordion_content_1">
            <dl>
               <dt class="accordion_toggler_2">Teleosts</dt>
               <dd class="sub_accordion accordion_content_2">
                  <dl>
                     <dt class="accordion_toggler_3">Eel-like fish</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Aalartige">Eel-like fish</a></p></dd>

                     <dt class="accordion_toggler_3">Perch-like</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Barschartige">Perch-like fish</a></p></dd>

                     <dt class="accordion_toggler_3">Pike-like fish</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Hechtartige">Pike-like fish</a></p></dd>

                     <dt class="accordion_toggler_3">Sturgeon-like fish</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Störartige">Sturgeon-like fish</a></p></dd>   
                  </dl>                  
               </dd>

               <dt class="accordion_toggler_2">Chondrichthyans</dt>
               <dd class="sub_accordion accordion_content_2">
                  <dl>
                     <dt class="accordion_toggler_3">Carpet sharks</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Ammenhaiartige">Carpet sharks</a></p></dd>

                     <dt class="accordion_toggler_3">Bull shark</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Grundhaie">Bull shark</a></p></dd>

                     <dt class="accordion_toggler_3">Mako sharks</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Makrelenhaiartige">Mako shark-like</a></p></dd>

                     <dt class="accordion_toggler_3">Rays</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Rochen">Rays</a></p></dd>   
                  </dl>                  
               </dd>

               <dt class="accordion_toggler_2">Fresh-water fish</dt>
               <dd class="accordion_content accordion_content_2"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Süßwasserfisch">Fresh-water fish</a></p></dd>
            </dl>
         </dd>

         <dt class="accordion_toggler_1">Birds</dt>
         <dd class="sub_accordion accordion_content_1">
            <dl>
               <dt class="accordion_toggler_2">Kingfisher-like birds</dt>
               <dd class="accordion_content accordion_content_2"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Eisvogelartige">Kingfisher-like birds</a></p></dd>

               <dt class="accordion_toggler_2">Owls</dt>
               <dd class="sub_accordion accordion_content_2">
                  <dl>
                     <dt class="accordion_toggler_3">Real owls</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Eigentliche_Eulen">Real owls</a></p></dd>

                     <dt class="accordion_toggler_3">Barn owls</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Schleiereulen">Barn owls</a></p></dd>                  
                  </dl>                  
               </dd>

               <dt class="accordion_toggler_2">Waterfowls</dt>
               <dd class="sub_accordion accordion_content_2">
                  <dl>
                     <dt class="accordion_toggler_3">Duck-like birds</dt>
                     <dd class="sub_accordion accordion_content_3">
                        <dl>
                           <dt class="accordion_toggler_4">Race of the geese</dt>
                           <dd class="accordion_content accordion_content_4"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Gänserasse">Race of the geese</a></p></dd>

                           <dt class="accordion_toggler_4">Race of the mire duck</dt>
                           <dd class="accordion_content accordion_content_4"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Greifvögel">Race of the mire duck</a></p></dd>                  
                        </dl>                  
                     </dd>
                  </dl>               
               </dd>

               <dt class="accordion_toggler_2">Raptorial birds</dt>
               <dd class="sub_accordion accordion_content_2">
                  <dl>
                     <dt class="accordion_toggler_3">Hawkish birds</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Falkenartige">Hawkish birds</a></p></dd>

                     <dt class="accordion_toggler_3">Goshawk-like birds</dt>
                     <dd class="accordion_content accordion_content_3"><p>Exemplary content: <a href="http://de.wikipedia.org/wiki/Kategorie:Habichtartige">Goshawk-like birds</a></p></dd>                  
                  </dl>                  
               </dd>
            </dl>
         </dd>

         <dt class="accordion_toggler_1">Reptiles</dt>
         <dd class="accordion_content accordion_content_1"><p>Exemplary content: here I didn't feel like doing any more now, I am open to any submissions.</p></dd>

         <dt class="accordion_toggler_1">Mammals</dt>
         <dd class="accordion_content accordion_content_1"><p>Exemplary content: here I didn't feel like doing any more now, I am open to any submissions.</p></dd>
      </dl>               

   </body>
</html>

JavaScript | functions.js

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

   // Adaption IE6
   if(window.ie6) var heightValue='100%';
   else var heightValue='';

   // Selectors of the containers for switches and content
   var togglerName='dt.accordion_toggler_';
   var contentName='dd.accordion_content_';


   // Position selectors
   var counter=1;   
   var toggler=$$(togglerName+counter);
   var content=$$(contentName+counter);

   while(toggler.length>0)
   {
      // Apply accordion
      new Accordion(toggler, content, {
         opacity: false,
         display: -1,
         alwaysHide: true,
         onComplete: function() { 
            var element=$(this.elements[this.previous]);
            if(element && element.offsetHeight>0) element.setStyle('height', heightValue);         
         },
         onActive: function(toggler, content) {
            toggler.addClass('open');
         },
         onBackground: function(toggler, content) {
            toggler.removeClass('open');
         }
      });

      // Set selectors for next level
      counter++;
      toggler=$$(togglerName+counter);
      content=$$(contentName+counter);
   }
});

CSS | styles.css

/* @group Reset */

*
{
   margin: 0;
   padding: 0;

   font-family: verdana, arial, sans-serif;
   font-size: 11px;
   line-height: 15px;
}

/* @end */

/* @group Universal definitions */

body
{
   margin: 20px auto;
   padding: 20px;

   width: 250px;
   border: 1px solid #509bba;
}

h1 
{
   margin-bottom: 15px;

   font-size: 20px;
   line-height: 22px;
   font-weight: normal;

   color: #509bba;
}

/* @end */

/* @group Accordion */

dl.accordion
{
   width: 250px;

   border-left: 1px solid #e6e2af;
   border-right: 1px solid #e6e2af;
   border-bottom: 1px solid #e6e2af;
}

/* @group Level 1 */

dl.accordion dt
{
   position: relative;
   height: 20px;
   padding: 5px 0 2px 25px;

   font-weight: bold;

   color: white;
   background: #00506c url(icon_accordion_closed.png) no-repeat 5px 5px;

   cursor: pointer;
   border-top: 1px solid #e6e2af;
}

* html dl.accordion dt
{
   cursor: hand;
}

dl.accordion dt.open
{
   background-image: url(icon_accordion_open.png);
}

dl.accordion dd
{
   background: #efecca;
}

/* @group Content */

dl.accordion dd.sub_accordion
{

}

dl.accordion dd.accordion_content
{
   padding: 0 10px 0 25px;
}

dl.accordion dd.accordion_content p
{
   padding: 5px 0 7px 0;
}

/* @end */

/* @end */

/* @group Level 2 */

dl.accordion dd dl dt
{
   padding-left: 45px;
   background-color: #217492;
   background-position: 25px 5px;
}

dl.accordion dd dl dd.accordion_content
{
   padding-left: 45px;
}

/* @end */

/* @group Level 3 */

dl.accordion dd dl dd dl dt
{
   padding-left: 65px;
   background-color: #509bba;
   background-position: 45px 5px;
}

dl.accordion dd dl dd dl dd.accordion_content
{
   padding-left: 65px;
}

/* @end */

/* @group Level 4 */

dl.accordion dd dl dd dl dd dl dt
{
   padding-left: 85px;
   background-color: #7bc3e4;
   background-position: 65px 5px;
}

dl.accordion dd dl dd dl dd dl dd.accordion_content
{
   padding-left: 85px;
}

/* @end */

/* @end */

CSS classes

accordion
Denomination of the main DL container.

accordion_toggler_X
Denomination of the switch, followed by the nesting depth.

accordion_content_X
Denomination of the content, followed by the nesting depth.

sub_accordion
Denomination of the DL container if it contains further accordions - optional.

accordion_content
Denomination of the DL container if it contains further content - optional.


Bookmark or recomend this page

Write a comment


147 Comments

Bogdan visit website

08.10.2013 15:09:51

Hello AnonyK,

I don’t provide customization for the nested accordoin, so I can’t help you directly. Also the solution on this page is a little bit outdated. I would suggest to use jQuery UI for your porpose:

http://jqueryui.com/accordion/#hoverintent

Good luck,
Bogdan

AnonyK

05.10.2013 16:49:57

Hello Bogdan,

First of all, thank you for this informative tutorial. It is very insightful.
I do have a question though, since I’m still an absolute beginner in HTML, CSS, JavaScript, Mootools, jQuery, etc.. Is it possible to create a hover/mouseover version of the "Accordion open demo", where the user can open and/or close a submenu by moving the cursor/mouse over one of the main menus (Not only the closed ones, but also the ones, which are open right from the start)? If so, how can it be done? In addition to that, can a delay be added to the mouseover/hover effect?

Thank you in advance and keep up the great work.

Kind regards

AnonyK

celine

19.03.2012 03:39:36

Hello Bogdan,

My slider is using
I discover that if i using this js, the accordian menu cant function anymore…may i know gt what other possible methods to solve this problem?

Thanks.

Regards,
Celine

Hafid visit website

10.03.2012 18:03:51

Hello Bogdan,

Thank you for the answer, shame I can not use it on joomla, it is the best for me,
I must say that joomla team breaks my head with this constant joomla evolution ;-)

Cordially, Hafid.

Hal

06.03.2012 23:35:30

Thanks for sharing your work!
Is there a way to make an accordion button become linkable when you click it (instead of opening a nested button with a contents link)?

Bogdan visit website

05.03.2012 09:54:07

Hi Hafid,

I am sorry, but the nested accordion is not developed further and will not run with newer versions of MooTools.

Bogdan

Hafid

03.03.2012 15:52:37

Hello the forum,

I used it before on joomla 1.5
now I can not use it on joomla 2.5
joomla 2.5 works with MooTools 1.4

Cordially, Hafid.

Ricky

12.12.2011 11:06:10

Any problems running on Mootools 1.4?

Considering using this with joomla 1.7

julienV

16.11.2011 18:01:01

Hi all,

if you want to have initially expanded items, here is a modification of the while loop:

while(toggler.length>0)
{
// find index of open ones ?
var index = -1;
for (var i = 0, n = toggler.length; i < n; i++) {
if ($(toggler[i]).hasClass(‘open’)) {
index = i;
break;
}
}

// Apply accordion
new Accordion(toggler, content, {
opacity: false,
display: index,
alwaysHide: true,
onComplete: function() {
var element=$(this.elements[this.previous]);
if(element && element.offsetHeight>0) element.setStyle(‘height’, heightValue);
},
onActive: function(toggler, content) {
toggler.addClass(‘open’);
},
onBackground: function(toggler, content) {
toggler.removeClass(‘open’);
}
});

// Set selectors for next level
counter++;
toggler=$$(togglerName+counter);
content=$$(contentName+counter);
}

to use it, add the open class in the items you want opened in the html:
<dt class="accordion_toggler_1 open">Fish</dt>

hope this helps !

Anjan Phukan

09.11.2011 08:43:03

Great but I have a problem. I am using Accordion hover with MooTool 1.2. And it shows error that C is null in line no 492 in mootool1.2.js file. Any help?

Sailee Kulkarni

26.04.2011 11:18:38

Hi this is a great tool !
awesome job… thanks so much!

My question is why can’t I use the id="open_accordion_entry" with class="accordion_toggler_2" or class="accordion_toggler_3" why does it only work with class="accordion_toggler_1"?
Probably only one can be open at a time. But if I apply it to class="accordion_toggler_2" why does it not open class="accordion_toggler_1" by default and open class="accordion_toggler_2" as well?
When I applied it to class="accordion_toggler_2", the page had everything closed. But when I clicked on "Fische" then "Knochenfishe" and its sub menus opened too!

How so I make it work with sub menus and sub sub menus?
Please help.

Luis visit website

20.01.2011 17:37:56

Hi, i am trying to change the menu structure, but i have a problem
my menu is like this example

Menu 1
submenu 1
subsubmenu1
menu 2
menu 3
menu 4
submenu4

how can i insert menu 2/3/4 without childs? and + ou - to appear

regards,
luis

suvi

03.12.2010 12:18:28

i get code but its is not satisfied meeeee

Bogdan visit website

12.11.2010 17:48:55

Hi Govind,

the problem you describe happens because the JavaScript-Part is executed after the page is loaded and collapses the accordion. You can hide the accordion using CSS and fade it in after the page is loaded.

This should look quite better when the page is loaded the first time.

Good luck and greetings,
Bogdan

Govind

12.11.2010 14:03:58

Hey!!

Thanks for this awesome plugin friend..
Definitely one the best javascript FAQ plugins out there!

Have a small problem.

When the page loads, a preview of the whole expanded FAQ is seen, and then it collapses. IS there a way to stop this?

Hope one of you will help me.
Thanks in advance.. :-)

Bogdan visit website

08.11.2010 09:14:18

Dear Miming,

I am sorry, but I don’t offer active support for the nested accordion. My advice is to use it like it is if it fits your need or otherwise to look for another solution.

Best regards,
Bogdan

Miming

08.11.2010 07:59:28

Hi Bogdan,

I badly need help on this one. I have the same concern with Ben and you suggested him to use either ajax of javascript. The problem is, I’m not familiar with these two. I’m just new to web programming. Please help me. I already tired searching the net but unfortunately I couldn’t find what i need. Sample tutorials or links can be a great help. Thank you so much.

Problem: Is it possible to make the menu stay open at a certain place when invoked? (ie. if you opened the first nest and clicked an item, when you went to its page, the menu would stay open at that item)

Suggested Solution: This can be accomplished in two ways:

1) The related content is loaded using Ajax. In this case the whole page is not reloaded and the accordion stays open.

2) When not using Ajax you could use a separate Javascript trigger to open the accordion in relation to the opened page.

Miming

23.10.2010 05:55:18

Hi Bogdan…

Thank You Very Much for having such an amazing blog. My accordion now is working nicely.

Keep it up. You’re just a great help.

Bogdan visit website

08.10.2010 18:54:38

Hi Miming,

there is no build in way to dynamically insert data into the accordion. But of course you can use any kind of server side scripting (like PHP or ASP for example) to build a dynamic accordion to your liking.

Best regards,
Bogdan

Miming

08.10.2010 05:46:36

Hello…

I do like the function of the nested accordion as menu. But I have a little problem. All the data are hard-coded in the html page. Is it possible to retrieve it from any datasource? like xml and others?

Please help.

Thank You Very Much.

Terrance Grace

12.06.2010 19:28:34

More specifically: dl.accordion dt a:hover{color:red;} has no effect
accordion toggler 1 (with no content but with href link) inherits a:hover from my main style sheet no problem. I’m flummoxed over this one.

Terrance Grace

12.06.2010 02:06:45

More specifically: dl.accordion dt a:hover{color:red;} has no effect
accordion toggler 1 (with no content but with href link) inherits a:hover from my main style sheet no problem. I’m flummoxed over this one.

Terrance Grace

11.06.2010 20:10:13

Love the script! I’ve adapted it a little bit, getting rid of the background images and am now stuck with one problem: Getting the dt class that has content to hover (#ccc). The dt classes with no content hover fine. Is there something I’m missing?


dl.accordion
{
width: 250px;
text-align:right;
margin-left:-8px;
}

/* @group Ebene 1 */

dl.accordion dt
{
font-size:12px;
line-height:14px;
position: relative;
margin-bottom:-10px;
cursor: pointer;
color:#666;
}

dl.accordion dt a:hover{
color:#ccc;
}

* html dl.accordion dt
{
cursor: hand;
color:red;
}

dl.accordion dt.open
{
color:red;
}

* html dl.accordion dt.open
{
color:red;
}

dt {
font-weight:normal;
}


dl.accordion dd
{
position: relative;
overflow: hidden;
}

/* @group Inhalt */

dl.accordion dd.sub_accordion
{
background: blue;
}

dl.accordion dd.accordion_content
{
padding: 0px 0px 0 0px;
}

dl.accordion dd.accordion_content p
{
padding: 0px 0 0px 0;
}

/* @end */

/* @end */

/* @group Ebene 2 */

dl.accordion dd dl dt
{
color:#999;
margin-top:18px;
margin-right:-10px;
padding-right:3px;
}

dl.accordion dd dl dt .a:hover{
color:#fff;
}

dl.accordion dd dl dd.accordion_content
{
padding-left: 0px;
background: gray;
}

/* @end */

/* @group Ebene 3 */

dl.accordion dd dl dd dl dt
{
color:#fff !important;
}

dl.accordion dd dl dd dl dd.accordion_content
{
padding-left: 0px;
background: cyan;
}

/* @end */

/* @group Ebene 4 */

dl.accordion dd dl dd dl dd dl dt
{
padding-left: 0px;
}

dl.accordion dd dl dd dl dd dl dd.accordion_content
{
padding-left: 0px;
}

/* @end */

/* @end */

Bogdan visit website

20.04.2010 07:28:06

Hello Dana,

no I am sorry, I have no MooTools accordion using UL / LI tags at hand.

Bogdan

Dana

20.04.2010 07:27:47

Do you know if there is the same accordion with mootools using <ul> and <li> tags instead of definition list? I don’t know enough about the script to change it if possible.

John

14.04.2010 08:39:43

This is a great bit of code but could I ask you to consider using unique css selector names for every element, rather than universal * or standard html tags like h1 etc. It makes contributions much easier to add to existing sites. Many many thanks.

Bogdan visit website

09.04.2010 10:32:08

Hello Saran,

no I am afraid you can run only on nested accordion on one page.

Best,
Bogdan

Saran

08.04.2010 08:07:14

Is it possible for 2 Mootools scripts (mootools-nested-accordion_1.2) on the same page ?

Bogdan visit website

05.04.2010 09:53:25

Hello Saran,

I would not recommend you using Mootools und jQuery together on the same page. While it is technically possible it still can generate unexpected errors with several plugins. Another aspect is that the visitors of your site have accept longer loading times for both libraries.

My recommendation is therefore to stick with one of the two libraries and find the needed plugins for the choosen one.

Best,
Bogdan

Saran

05.04.2010 08:23:51

Hello
I use in one page Mootools and jquery-1.3.2 for another one purpose. But Mootools Conflict with jquery-1.3.2. Its produced some error, What can i do? can you help me?

CoronaGuy

19.03.2010 15:36:03

Helped me out a lot too. Thanks.

munkyChop

19.03.2010 02:46:34

Hey this helped me out a lot :)

When I have the time maybe I will make some modifications to the JavaScript to close sub-sections when a parent section is closed… hmmm time :S

But anyway, THANK YOU!

Marcus visit website

18.02.2010 10:06:45

Hello, can someone help with triggering accordion item which is in level 3,4 or higher ?
oszonen@gmail.com - thanks

Bogdan visit website

03.02.2010 14:49:22

Hello Krishna,

I am sorry, there are no functions included to open and close all panels. You will need to extend my script to achieve this.

Good luck,
Bogdan

krishna

03.02.2010 06:56:06

what do i need to do if i want to add "open all" and "close all" …

krishna
kpaccess@gmail.com

kanalje

10.12.2009 10:13:42

Great scripts!

I’m a complete javascript illiterate and had been pulling my hair for hours, trying to inject content in to an accordion. One glance at your code and I knew exactly what I needed to do. Two seconds later my site functions flawlesly and I even have time to spare so that I can write these comments.

You’ve been bookmarked!

Bogdan visit website

11.10.2009 16:05:48

Hi Deeve,

sure you can adjust the position of the icons just by CSS. The Icons are inserted as background images into the DT tags. Just insert background position in the for the DT background image.

Good luck!

Bogdan

deeve

11.10.2009 11:20:15

Hi Bogdan,

Truly great script! I have one question though:

I’ve been trying to adjust the padding for the icons so I can move them more to the left but can’t seem to make them budge. Is there an easy way to do this in the CSS style sheet or are they controlled by the mootools.js?

Thanks.

Kwame Adom visit website

23.09.2009 06:27:10

Hi Bogdam,

i love your script, i had a jquery script but it wouldn’t work on ie 6 and i found yours. worked like magic. i need a little help to tweak it.

i want the browser to remember and and open the last node node, this is what i have done after reading through the comment.
<dt class="accordion_toggler_2"><a href="" onclick="$(‘ID’).fireEvent(‘click’);" id="2">Barschartige</a></dt>

thanks

Rob

17.09.2009 16:17:26

I love this, but is there a way to get the old ones to close when viewing another section..
So when you go back to the last one you visited, they are all closed again..

Bogdan visit website

01.09.2009 11:29:28

Hi Designermonkey,

thanks for your feedback. I can reproduce the problem with IE6. It seems to occur only with MooTools 1.2, the demo of the Accordion with MooTools 1.11 works fine in IE6. So please use this version if you need compatibility with IE6. Otherwise, do it like me (try to open this blog with IE6).

:-)

Designermonkey visit website

28.08.2009 18:09:58

I really love this script, exactly what I need for a destination list…

Only one problem, it is broken in IE6. When clicking on a tab, it opens up the panel displaying the nested list, until the slide finishes, then the nested list disappears until the parent tab is clicked to close the panel.

I haven’t implemented this yet, just still using the demo files…

Bogdan visit website

06.08.2009 14:23:25

Hi Angel,

I am glad I could help :-)

Angel

06.08.2009 13:40:47

Hi Bogdan,

Yay! It worked! Thank you so much. You’re my hero!!! :-D

-Angel <3

Bogdan visit website

27.07.2009 07:58:04

Hi Angel,

reading your description, it seems to me that IE8 does not load the accordion style sheet at all due to wrong syntax. Following syntax for your style sheets should work:

<link href="styles.css" type="text/css" media="screen" rel="stylesheet" />
<link href="stylemod.css" type="text/css" media="screen" rel="stylesheet" />

Always make sure the quotation marks are set on every parameter. No title or alternate rel definition is needed.

Bogdan

Angel

27.07.2009 07:28:44

Hi, I’m using the closed accordion version 1.2 and it seems to work well in Firefox but it shows up strangely in IE8. I’m using two different css stylesheets - one for the website layout and the other for the accordion menu. This works fine in Firefox, as I mentioned, but in the IE browser, the menu does not show any of the background or text colors and the plus or minus images do not appear either. All I see is text links - not buttons. When I hover over the "invisible" buttons that seem like text links, the cursor remains a straight vertical (or text) cursor and does not change into a hand (or pointer) cursor. However, if I actually click where the buttons should be, it appears to expand and contract normally.

It seems like the issue may be in the header, since I have never applied two stylesheets to one page. I’m including the header here just in case it helps you:

<head>
<title>Title</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<!— Mootools JS Framework | http://www.mootools.net —>


<!— Verschachteltes Accordion —>


<!— Beispiel-Styles —>
<link href="styles.css" type="text/css" rel="alternate stylesheet" title="Index"/> <!— To apply multiple style sheets the titles must be the same and the rel tag must contain "" for the dominant style see and use this as an exact example —>

<link href="stylemod.css" rel=stylesheet type="text/css" title="Index"/>

</head>


I would REALLY appreciate your help with this.

Thank you,
Angel

iMax77 

30.06.2009 10:13:25

thanks Bogdan for your reply, so I use this function to check if a node is still open (hasClass) when I want to open a node inside him using the fireEvent method. It works fine from a modal box to open node from the parent window.

from the modal page :
list of element :
<a href="#" onclick="javascript:window.parent.opennode(‘d<?= $row_day[’id’]; ?>’);">day_n</a>

in the main page :
function opennode(v) {
if($(v).hasClass(‘open’) !== true)
{
$(v).fireEvent(‘click’);
}
}
Hope contribute.
Thanks again :)
Max

Bogdan visit website

30.06.2009 07:48:39

Hi Max,

I am afraid there is no function to collapse all nodes, as least none that I now of. But if you know a little JavaScript you could use the ‘Accordion open’ version and close the active node with a .fireEvent(‘click’).

Good luck!

Bogdan

iMax77 

29.06.2009 20:40:41

Hi Bogdan,

Congratulation for your very usefull script, I found plenty of good comments and you answers give me a real help. However, I don’t find the way to close by an instruction all of the nodes already open, a kind of general reset ?
Thanks again for your job and the way your share it,
Best regards
Max

Pieter

16.06.2009 14:31:17

Thanks Bogdan. The code works like a charm!

Bogdan visit website

16.06.2009 09:38:40

Hi Pieter,

you should be able to accomplish the described behavior by using the fireevent() MooTools function within you onclick call. This would look something like:

onclick="$(‘ID’).fireEvent(‘click’);"

Hope that helps, Good luck!

Bogdan

Pieter

15.06.2009 12:32:01

Hi Bogdan,

I would like to know if it is possible to specify a menu item to open 1 or more sub levels below the selected menu item. i.e. Using your example, if I select "Fish" is it possible to have it automatically open "Perch-like". If so, what might the code be. I have added a unique ID to each item as I assume that I will need to use ‘getElementByID’ to either change the style to open or display the item. In addition, I assume that I will need to trigger the event using an ‘onclick’ set within a link. Unfortunately, I am new at javascript and have thus far failed to get it to work. I would greatly appreciate any direction you could give me.

Best rgds,

Pieter

Bogan visit website

05.06.2009 11:29:56

Yes, if you want to adapt the look of the deeper nested entries, just add styles with nested dt dl selector.

Marcus visit website

05.06.2009 11:27:54

Thank you very much for quick answer. and I just need to add deeper css ?

Bogdan visit website

05.06.2009 09:30:46

Hi Macrus,

you can make make deeper categories simply by nestling the <dl> tags further:

<dl class="accordion">
<dt class="accordion_toggler_1">Level 1</dt>
<dd class=" accordion_content_1">
<dl>
<dt class="accordion_toggler_2">Level 2</dt>
<dd class=" accordion_content_2">
<dl>
<dt class="accordion_toggler_3">Level 3</dt>
<dd class=" accordion_content_3">
<dl>
<dt class="accordion_toggler_4">Level 4</dt>
<dd class=" accordion_content_4">
<dl>
<dt class="accordion_toggler_5">Level 5</dt>
<dd class=" accordion_content_5">

Marcus visit website

04.06.2009 21:12:58

Hi, good one. But how to make deeper categories ? I need to make 10 instead of 3 childs… Please email if someone can..

oszonen {at} gmail dot com

Jay Collier visit website

18.04.2009 03:43:22

This works great with 1.2, but breaks with 1.2.1 with yahoo compression.

Perhaps someone on this thread will suggest how to regain compatibility, because this is great!

Bogdan visit website

20.03.2009 09:52:46

Dear Casino,

thanks for your feedback regarding the possibility of having multiple open accordions. Maybe I expressed myself not clear enough in my previous post, of course it can be done but not easily with the script provided on this site. And as Eva and you have certainly read at the very top of this article I am not actively developing or expanding the script at the moment.

Regarding your concern for valid (X)HTML I am afraid I have to tell you that you are wrong. LI tags are block elements and there is no problem inserting other block elements inside them. Please test the validation of the accordion demo at: http://validator.w3.org/

Speaking of valid code, have you tested your own site casinostrial.com for errors? There are quite a lot of them according the w3 validatior …

casinos trial visit website

20.03.2009 08:29:55

Hi,nothing easier, your problem is that you are trying to do that with only one acc and only one set of classes and of course, this doesn’t work. Just use different classes and another acc declaration for the nested one and it will work.One more thing, well, xhtml day today, please, do not nest div inside li, this is not valid xhtml as you should only have inline elements inside inline elements. If you want to have block like element inside your li, just use display: block and any kind of el will behave as block elements.
Have swing

EVA

17.03.2009 11:02:36

oh sorry… my english is horrible.
My problem is that I need that when I pulsate in a link of the third level IT CONTINUES unfolded the menu, it isnt closed. It has relation with acctests.html?.

Thanx ;)

Bogdan visit website

17.03.2009 08:12:39

Hi Eva,

I am sorry, but the the script provides only one open accordion at the same time.

Best,
Bogdan

EVA

16.03.2009 18:34:55

hi!
Congratulations for the script!!

Is possible to maintains the state (open / close) when i click over a final option?…I have 3 levels and i dont like that the menu close in this click (yes in first or second level).

thanx ;)

venkat

02.02.2009 10:36:34

I like to Get Accordion from bottom to top; Instead of Top to bottom
what change should i do ? any help?

Bogdan visit website

11.01.2009 13:05:49

Hi Christophe,

I am glad the nested accordion was so useful for your purposes. Thanks for you feedback!

Best,
Bogdan

Christophe visit website

09.01.2009 13:03:45

Hi Bogdan,

i just wanted to leave a quick word of thanks,
believe it or not, but I implemented this script in a WSS project ( Windows SharePoint Services ) en even if it wasn’t easy, but thats was not the script’s fault, but WSS’s, I managed, and hell, its exactly what I wanted it do be and do!

We even added a module to open up the location of the page in the script, but believe me, in WSS thats easier said then done!

Keep up the fantastic work, i can confirm you that your script is exactly what lots of people need!

Gopi

02.01.2009 13:26:39

Hello,
This looks fantastic!
I am looking to create a vertical accordion with two levels.
The trick is that I want the first level to expand on "click" and the nested accordion to expand on "mouseover".
Can you please help me with this?
Your help would be much appreciated!
Regards,
Gopi

Peter

30.12.2008 23:08:33

It seems heightValue is not set, placing the following line in comments solves the problem I mentioned above.

// if(element && element.offsetHeight>0) element.setStyle(‘height’, heightValue);

Peter.

Peter

30.12.2008 19:18:46

When using the mootools 1.2 version, the sub-lists disappear after the sliding effect has been completed. Simple content stays visible. The other version works like a charm…

Screenshot: http://flickcabin.com/public/view/full/17071

Peter

Foohl visit website

23.12.2008 21:07:50

Thanks Bogdan.
Why didn´t I try that? :)

/F

Bogdan visit website

23.12.2008 11:00:16

Hi Foohl and thanks for you comment. You can add your script just below the first line of my script:

window.addEvent(‘domready’, function() {

// your script here

….

}

Everything inside this brackets is executed after the page is loaded.

Good luck,
Bogdan

Foohl visit website

22.12.2008 17:16:04

Hi Bogdan!
I really like your script.
I am a neewbe to Javascript, and I can´t figure out how to write the onload script. Can you help me? (I want to use a "display:none", and set the style to "block" on load. But I don´t know how to write the onload stuff, and where.
I have searched the net, but unfortenatly I cant find anything (Nobody else asks this simple questions :-) )
Thanks
/F

Aaron Calderon visit website

17.12.2008 10:30:21

@Bogdan

Sorry about my compulsive posting behavior today.

The bug report is here:

http://mootools.lighthouseapp.com/projects/2706/tickets/114-accordion-display-method-broken-with-alwayshide

Last, awesome code man, it is just sweet.

AC

Bogdan visit website

17.12.2008 10:25:23

Thanks Aaron, I’ll take a look at this sometime in the next time.

Aaron Calderon visit website

17.12.2008 10:20:19

@ Bogdan

Hi,

I was reading about the issue of showing a particular element opened by default or to use the method .display(<index>);. It turns out that there is a bug with regards to the display method when the alwaysHide option is set to true.

The behaviour of the method display comes back when you set the option alwaysHide to false.

You can set a particular sub menu to be opened by default as follows; in the file functions.js:
line 20 replace:
new Accordion(toggler, content, {
with:
aa[counter-1] = new Accordion(toggler, content, {
line 13 add:
//declare accordion array
aa = [];

then, you can use the display method as follows:
aa[0].display(0);
aa[1].display(1);
aa[2].display(1);

or you can pass an ID to the display method as follows (remember that you need to set the ID before hand):
aa[0].display($(‘topmenu1_submenu2’));

AC

Aaron Calderon

17.12.2008 09:55:12

@Robster:

Hi,

I added the following method to the accordion script, I’m using 1.11:

expandAll: function(){
this.elements.each(function(el, i){
el.setStyle(‘display’, ‘block’);
el.setStyle(‘overflow’, ‘auto’);
el.setStyle(‘height’, ‘auto’);
el.setStyle(‘visibility’, ‘visible’);
}, this);
return this;
}

So, you call this function to the instance of the accordion class that you want to expand.

AC

Bogdan visit website

17.12.2008 08:34:12

I am sorry Aaron, I have some keyword filtering active to lock out unwanted comments here at my blog. Maybe you had one of this keywords inside your comment by accident. I am happy it worked now!

Aaron Calderon

17.12.2008 07:52:24

@Barton:
you can change the following lines, on the functions.js file, to:
line 7:
var togglerName=’a.accordion_toggler_’;
var contentName=’ul.accordion_content_’;

In the example you will be using an A tag and a UL tag to toggle the accordion.

AC

Aaron Calderon

17.12.2008 07:50:10

why is my comment rejected?

Barton

09.12.2008 21:48:20

Hi,
great control menu!

How can the links in the content area be changed to use <UL><LI>?
Also, like the caption example.

Thanks,

Barton

Adi

30.11.2008 01:59:59

I understand.
I just wish I can know what I did wrong. Cause I’m new in CSS and don’t have a clue about JavaScript.
I will still try look for answer.

Thanks anyway.

Cheers,
Adi

Bogdan visit website

29.11.2008 13:03:26

I am sorry Adi, I am afraid I can’t help you with your questions. The Nested Accordion script is provided free for any purpose as it is, but as stated in the beginning of this blog entry without support. I am sure you can understand this, otherwise I would end up answering support requests all day :-)

Cheers, Bogdan

Adi

29.11.2008 04:53:45

Well, what I need most is the MouseOver event. Not the external list.
But if it can’t be done for both, it’s ok.

I have a problem. It seems that I can’t rezise the left padding. Only the first toggler that I can resize, but not with the other nested toggler (and content). I’ve already change all the padding-left property in the CSS but nothing seems to change.
I don’t use the button cause already have limited space with so much nested menu, so I need to make all of the sub menu to go more left.

And how can we not use the toggler content ?
All my menu don’t use description so when I click on the last nested menu, it will just open a window. But when I delete the "<dd class="accordion_content accordion_content_3">" the code won’t work. But when I use it with empty character, works fine in firefox but in IE, it will open an empty space below the nested menu.

Thanks,
Adi

Vincenzo

28.11.2008 14:11:41

sorry, I think in the previous post there was some <script> tag….
here is the script

//provide the click() method to firefox
var browser=navigator.appName
if(browser == "Netscape"){
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent(‘MouseEvents’);
evt.initMouseEvent(‘click’, true, true,
this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
}

// REMEMBER to add the onload="init()" method in the <body> tag.
// Otherwise the script won’t work in MS Explorer
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init(), false);
}

// add an identifier to each of the togglers you want to trigger
// example: <dt class="accordion_toggler_1" id="aperto1">Prodotti</dt>
function clickButton(){
document.getElementById("aperto1").click();
document.getElementById("aperto2").click();
}

//a timeout is required because of the time necessary to the script to build the accordion
function init(){
var t = setTimeout(clickButton, 800);
}

Vincenzo

28.11.2008 14:08:21

Hi Bogdan.
I succeeded to load the accordion expanding some of the levels.

The script is a bit raw, but… hey.. it works!



Thanks for sharing your work
Vincenzo

Bogdan visit website

28.11.2008 11:47:08

Hi Adi,

I am sorry, but there are no build in solutions for your request in my accordion script. Both features can definitely be integrated, but would require quite some handwork and programming skills.

Cheers,
Bogdan

Adi

28.11.2008 09:22:27

Hi

It’s a cool menu… I want to use it on my project.
But I have 2 questions:
1. Can we make it automatically onMouseOver instead of clicking the menu ?
2. Can we make the menu list outside (from other file) ? Cause when there is too much nesting, I usually get lost in the code.

Thanks,
Adi

Mike visit website

18.11.2008 11:07:43

Hi!

Very nice script, but i really would like the cookie-function to work. Cant get it right….
Either Davids or Twincascos solution seems to work.

Anyone?

Matt visit website

10.11.2008 19:15:20

Cheers Bogdan, that worked really well. I inserted the script above the </body> tag.

Matt

Matt visit website

09.11.2008 20:28:19

Hi Bogdan,

Thanks once more. So upon onload I’ll access the DOM then change the Accordion’s property to display: block. I’ll send you the link once it’s up and running.

Thanks again,

Matt

Bogdan visit website

09.11.2008 18:44:33

Hi Matt,

the script is triggered on ‘domready’ so pretty much of the page is already loaded before the script starts. If you want to hide the opened accordion while the page is loading the best way to do this is using CSS with display: none. Than you trigger a Javascript event ‘onload’ with display: block for the accordion.

Cheers,
Bogdan

Matt

09.11.2008 17:00:48

Hi Bogdan,

I’m implenting your gallery into a site and it’s working well; though I have just one problem…

Before the page loads, I’m getting an unformatted ‘page flash’ in IE7; in other words it appears without the nesting (every element shows). How can I get the script to fire before the page loads?

Thanks again,

Matt

Amelia

05.11.2008 00:35:51

David Safar and Twincascos:

Do either of you have a complete working snippet of your cookie code?
When the user navigates away through a content link.
When they hit the back button I wanted them to see the same state as they left it.
I’m very anxious to find a version that works with this nested accordion.

The accordion is exactly what I needed. Thanks!!

Angra-Mainyu visit website

03.11.2008 11:18:08

Hi.
Thanks for sharing this great code.
I use it to make a sitemap for my directory.
For validation, i use a
"<dd class=" accordion_content_2"> </dd>" for w3c validation
My question is : how can i detect this value and not implement the accordeon with this value.

In my site, when i click for the moment, the accordeon opens on a blank sub div
see at htttp://www.webmestre-annuaire.com/sitemap.hml

Thanks for help.

Olaf

29.10.2008 22:25:54

Hmm…I wonder if I should be using a vertical slide instead….thoughts?

Olaf

29.10.2008 22:15:50

http://www.hovara.com/nestedcode.png

Picture of what I was referring to above…that is how it should be.

Unfortunately I am achieving it in a hack-like way.

Olaf

29.10.2008 22:01:50

I’m having some issues displaying content for each level while continuing the nest. Example:
I am displaying php code and wherever there is an include there is an accordion nest that will expand the include and show the code for that included file…now that file might have includes and so forth. I am currently having issues displaying the content (php code) without breaking the nest (it stays open instead of starting closed and cant be toggled) I can fix it by being hacky and recreating an empty accordion mimicking the the nest levels of the file with the valid <dd class=" accordion_content_1"> which I am not using in the accordion to display code…only <dd class="accordion_content accordion_content_1"> So I guess what I am asking is how would you in your example have content display in Knorpelfische while nested into Grundhaie and its content?

Anthony visit website

29.10.2008 17:16:32

perfekt! danke!

David Safar visit website

28.10.2008 16:38:38

Twincascos: maybe…it could be easier to handle it via internal Accordion array directly in ‘onActive’ :)
Not tested for multilevel subitems…

Code snipped as inspiration:
—-
var counter=1;
var toggler=$$(togglerName+counter);
var content=$$(contentName+counter);

var openItem = -1;
var myCookie = new Cookie(‘menuOpen’);
if ( myCookie.read()) {
openItem = myCookie.read().toInt();
}

while(toggler.length>1)
{
var acc = new Accordion(toggler, content, {
opacity: false,
display: openItem, // ENTER COOKIE VALUE
alwaysHide: true,

// …. code cut

onActive: function(toggler, content) {
toggler.addClass(‘open’);
var idx=this.togglers.indexOf(toggler);
myCookie.write(idx);
},

// …. code cut
}

Bogdan visit website

22.10.2008 18:38:27

Hi Gary,

great that you found a solution and thanks for posting your insights here. Thanks to Jason Jaeger too, of course :-)

Of course I know the "has layout bug" of IE6 and IE7. I think every web-designer who coded more then three websites does, but I did not realize this was the cause of your problem.

Gary Jorgenson visit website

22.10.2008 17:23:04

Problem solved!

I contacted Jason Jaeger (http://greengeckodesign.com) about the weird padding-bottom "bump" issue in IE. He responded that this issue looks like the "Microsoft Internet Explorer hasLayout bug" Here’s how he said to work around it:

This can be fixed by adding zoom:1; to the first rule declaration in nested-accordian.css:
dl * {
margin: 0;
padding: 0;
zoom:1;
}

He also said this:
Zoom forces the elements to "have a layout" in IE. It is worth noting that zoom is not standard css (it is just for IE). I generally put IE specific css in a separate css file which is attached via a conditional comment which makes for cleaner code than using the star html css hack and will allow your css files to validate. Kind of a preference thing though.

Bogdan visit website

21.10.2008 12:04:51

Thanks, looks like a nice add on!

Twincascos visit website

20.10.2008 18:24:42

I’ve just finished a cookie additive for this: I hope I can write code here,
[code]//new cookie opener start
function autoOpen(myCount){
toggler.each(function(el, i){ //here you set your cookie
el.addEvent(‘click’, function(){
Cookie.write((‘menuOpen’+myCount), i);
});
})
if (Cookie.read(‘menuOpen’+myCount)){ //here you retrieve the cookie value if there is
var menuOpened = Cookie.read((‘menuOpen’+myCount)).toInt();
}else { //if there isn’t, back to the default closed value
menuOpened = -1;
}
menuOpenAt = menuOpened;// set your Accordian to display: menuOpenAt or show:menuOpenAt

//console.log(‘the menuOpen is ’ + Cookie.read((‘menuOpen’+myCount)) +’ .’);
// menuOpen+1,2,3,4 need to be cleared to -1 to avaoid memory of previous click when new top level click
//Cookie.dispose((‘menuOpen’+myCount)); this doesn’t work here removes too many levels
}//end autoOpen
if (counter == 1){
autoOpen();
}else if (counter == 2){
autoOpen(2);
}else if (counter == 3){
autoOpen(3);
}else if (counter == 4){
autoOpen(4);
}else{
menuOpenAt = -1;
}
//new cookie opener stop[/code]
add this right after while toggler.length if this doesn’t go through the comment filter, I’ll post the code over at my slider site
Thanx again for the recursive accordion

Bogdan visit website

20.10.2008 11:59:31

Hi Gary,

I am not sure how this conflict happens. The both CSS files are quite specific to their related classes and IDs, but maybe there is also some CSS manipulation in the javascript part taking place. However if you are concerned just about IE7 you could use conditional comments or the IE7 CSS hack to solve the problem:

*+html dl.accordion dd.accordion_content p {
padding-bottom: 0;
}

Good luck!

Gary Jorgenson visit website

20.10.2008 04:27:28

Having odd cc conflict when using MenuMatic (http://greengeckodesign.com/projects/menumatic.aspx) menus on same page as your nested accordion.

When viewed with IE7, mousing over an expanded accordion appears to trigger a padding-bottom "bump" of about 7px.

I’ve setup a page showing the behavior at http://www.robintek.com/accordion/index.html

If I comment out "menuMatic.css", from the page, the odd behavior stops.
I also believe to have narrowed the conflicting css to:

dl.accordion dd.accordion_content p {
padding: 5px 0 7px 0;
}

Changing the "7px" seems to alter the space that menus get "bumped" on mouseover.

Any suggestions?

btw, your nested accordion is amazing.

Bogdan visit website

15.10.2008 19:03:44

Hi Twincascos, nice work! I am glad you used the Nested Accordion to develop your own WordPress plugin. Thanks for the credits!

Twincascos visit website

15.10.2008 18:02:28

I’ve just used your java script code to create a wordpress plugin. Thank you for your work. I do give you full credit for the code. I hope this is ok with you. you can see it in use , and download the plugin here: http://wp-superslider.com/superslider-menu

BillO visit website

09.10.2008 15:42:54

detailCode wrote — "Did anyone notice that when you resize the window, the menu stays in the previous position until you expand/collapse it. FYI."

I’m having the same problem with Internet Explorer (Exploder), Firefox and Safari work as expected. If you resize the browser window the menu stays at its original position. Selecting an item in the menu will move the menu to the correct position. This occurs with version 1.11 or 1.2.

Any assistance would be appreciated.

Bogdan visit website

08.10.2008 18:06:53

Why don’t you give the link the full size of the dt-tag? Something like …

dl.accordion dd dl dt a
{
display: block;
width: 100%;
height: 100%;
}

dl.accordion dd dl dt a:hover
{
color: #db6f1f;
background-color: #e6e3e2;
}

… should work :-)

Matt

08.10.2008 17:54:35

Thanks again Bogdan. It’s the first time I’ve played around with a <dd> structure for a nav menu; normally it’s the <ul> kind of stuff. One thing I’d to achieve but am struggling a bit……

I’d like the sub navigation (<dt class="accordion_toggler_2">) to change colour on hover state. The following CSS was inserted but only spans the width of the link; ideally I’d like to span the entire width of the accordion. Is there a way?

dl.accordion dd dl dt a:hover
{
font-size: 12px;
background-color: #e6e3e2;
background-position: 20px 0;
color: #db6f1f;
padding:8px 0pt 2px 45px;
/*border-bottom:1px solid #1f1c17;*/
height: 18px;
}

Thanks,

Matt

Bogdan visit website

07.10.2008 16:52:29

Hi Matt,

as written at the very top of this blog entry the Nested accordion works perfect with Mootools 1.1 AND 1.2 :-)

You can use the Nested accordion both non-commercially as well as commercially as you like.

Best,
Bogdan

Matt

07.10.2008 16:40:53

Hello Bogdan,

Thanks for the swift reply! In my opinion, it’s the best looking/functional slide show I have come across, but is only compatible with 1.1. If I don’t plan to extend its functionality - and it works perfectly well as it is - then 1.1 no longer being supported shouldn’t be problem, yes?

Lastly, I can’t see on this page what your script can be used for; can I assume it can be used both non-commercially, as well as commercially?

Thanks again,

Matt

Bogdan visit website

07.10.2008 16:22:06

Hello Matt,

I am glad you like the accordion!

I think better not to mix Mootools 1.11 and 1.2. The Nested accordion works also great with both versions. But maybe you want to have a look if you can’t find a slideshow for Mootools 1.2 as the 1.11 version ist really supported any more.

Best,
Bogdan

Matt

07.10.2008 15:53:58

Hello Bogdan,

Lovely looking accordion; the icons are a great touch. A quick question if I may…..

I’m attempting to implement a slide show that uses Mootools 1.11. Would you recommend I use your 1.1 accordian, or download the 1.2 version, thus running two scripts?

Thanks,

Matt

Bogdan visit website

15.09.2008 13:01:58

Hi Cesar,

separate accordions shouldn’t be a problem. Just make sure you use different identifiers:

var myAccordion_1 = new Accordion(togglers_1, elements_1);

var myAccordion_2 = new Accordion(togglers_2, elements_2);

cesar visit website

15.09.2008 11:43:01

great script.

im using mootools accordion on my site. all is good… until i try to add a second accordion. then either they work together or only one works. do you have an example of two separate accordions working on the same page? thanks.

Bogdan visit website

12.09.2008 12:30:33

Hi Gian,

thanks for the feedback!

There is no build in method to open an element by default. However you could try to fire a click event on the element you want to open after the page finished loading. See:

http://developer.mozilla.org/En/DOM:element.click

Best,
Bogdan

Gian Luca Ponti visit website

12.09.2008 09:51:14

Hi Bodgan!

this is the best accordion I have ever see! It works great!
Only I have not understoond how I can display a nested element by default.
The ‘display’ option works on many element and I think is not the way.
I’ll try to be more clear: in your demo I would like to load the page starting like this:
- Fische
- Knochenfische
+ Aalartige
+ Barschartige
- Hechtartige
my text and link
+ Störartige

Can you explane me how I can do? It is possible?
Thanks again.
Gian Luca

Bogdan visit website

03.09.2008 15:03:36

Hi Robster,

nice to hear that you worked it out. There is no built in method to expand all containers of the accordion. However I guess a pragmatic way to accomplish this would be to delete the accordion class so the accordion is displayed as pure HTML which is all expanded by default.

Please have a look at the update notes I added on top of this article.

Thanks,
Bogdan

Robster visit website

02.09.2008 02:57:05

Bogdan,

I ended up working out the template issues and it is now great. Once again this accordion is the best.

I have been asked if there is a way to have all sections expand at once. Say have a link on the page to ‘Expand all’. Could you let me know if this is possible?

Much appreciated.

Robster

detailCode visit website

19.08.2008 21:10:09

In IE6, the nested nodes do not indent to the right, but confusingly all stay to the left. When collasping in IE6, the nodes expand to four times the height before collasping.

Is there a function to collaspe all the nodes?

Mo

14.08.2008 19:50:57

This is perfect. Using mootools 1.2 it also works as far as ive tested. The only thing im trying to get to work using your accordion is to implement a way for it to remember its last position. Right now im using a cookie as shown here:

http://www.virtual-gadjo.com/test/acctests.html

Ive given it a try to get this working with your accordion but i just cant get it working. I hope you can take a look at it.

detailCode visit website

14.08.2008 16:25:17

This is great! Did anyone notice that when you resize the window, the menu stays in the previous position until you expand/collapse it. FYI.

Bogdan visit website

14.08.2008 12:42:04

Thanks Gary. I know I should update the accordion to Mootools 1.2 but at the moment I just can’t find the time. But it is definitely on my to do list :)

Gary visit website

13.08.2008 03:34:33

Please please please upgrade this to mootools 1.2 release! This is the best looking accordian menu on the web

Bogdan visit website

07.08.2008 09:04:12

Hi Robster,

thanks for you feedback.

I am sorry, without seeing how you used the script and what you template looks like I can’t really tell you what the problem might be. Do you have a link for me?

Thanks,
Bogdan

Robster

07.08.2008 09:00:22

Bogdan,

Well done on this script, works very nicely. Although I am having a problem once I put our templates over the pages. In FireFox it works beautifully but in IE 6 & 7 the accordion if fully opened on entry to the page.

I do believe it’s a problem with the templates, but it works in FireFox. Any ideas?

Robster

Ricky

09.07.2008 14:52:39

I thought that might be the case….

I appreciate your thoughts, and I’m sure I’ll still have a few uses for the script on the site!
Thanks again,

Ricky

Bogdan visit website

09.07.2008 10:11:15

Hello Ricky,

I am afraid I have to disappoint you on this question:

First of all this accordion script is not meant to build whole websites based on it. Your visitors may want to bookmark or open certain pages in browser tabs. All this is not possible using the accordion.

The second point is that the accordion is not build to remember the different open levels and this is why this strange behavior happens.

I suggest to build your page in the standard way using different HTML files and to use some Mootools FX for the cool visual effects.

Bogdan

Ricky

09.07.2008 06:55:21

Hey Bogdan,

First of all, thanks a lot for putting together such a smooth script. I’ve been looking for something like this for a while!

I’m having a funny problem with it though and I’m hoping you could take a look at it - see if you can point out what’s going. I’m using the script as a menu of sorts and it’s integrating pretty well, but I’m having a problem when I set the JS to open the first tier of the accordion automatically when the page loads. Any tiers without nested accordions open properly, and also the FIRST tier with a nested accordion opens properly. But if there is SECOND tier with a nested accordion, it doesn’t open the nested accordion automatically. Strangely enough, if you manually open and close the "broken" tier and then go back to the first "working" tier, that tier will now also not open automatically.

It may be difficult to imagine what I mean. You can view the page here:
http://www.publicimagephotography.com/NEW/r_i.html

Click on "WEDDING RATES" on the left to see the first tier of the accordion with a nested accordion.

Then click on "ABOUT US" to see the second tier with a nested accordion. This one doesn’t automatically open. Click "WHO WE ARE" to manually open it, then go back to "ABOUT US".
That section no longer opens automatically…

Any ideas on what’s going on? I was able to reproduce the same problem with the demo by simply switching "display" from -1 to 0 in the JS. I’m not that savvy with JS myself and I’m not sure where to start.

Thanks again!

Ricky

Bogdan visit website

07.07.2008 10:31:18

Thanks Jax! Yes the script is free. However you can link my Blog somewhere in the imprint of the page you use it if you like.

Bogdan

JaxStyle

06.07.2008 20:50:54

hi!! Bogdan, wonderful and interesting script menu. Can i take this for one application that i’m developed without problems? in other words, Is this script a free software?

Bogdan visit website

06.07.2008 16:13:50

Hi Julian! Sounds great! Do you have a link for us where we can see your Wayfinder integration in action?

Julian visit website

06.07.2008 01:41:14

With a small modification to wayfinder (added placeholder) I have successfully used this menu with modx. I imaging that careful use of the class count placeholder might avoif having to modify wayfinder - but frankly I found that incomprehensible.

Julian

Gary visit website

04.07.2008 08:03:54

Fantastic! Congrats to yourself and Ryan, and MooTools dev team of course :)

Bogdan visit website

27.06.2008 09:46:13

Hi Ben,

This can be accomplished in two ways:

1) The related content is loaded using Ajax. In this case the whole page is not reloaded and the accordion stays open.

2) When not using Ajax you could use a separate Javascript trigger to open the accordion in relation to the opened page.

Hope that helps!
Bogdan

Ben

26.06.2008 15:15:09

Brilliant menu system! well done.

i have a question though being new to javascript myself…

is it possible to make the menu stay open at a certain place when invoked? (ie. if you opened the first nest and clicked an item, when you went to its page, the menu would stay open at that item)

this would really help for knowing where you are on a website if this menu was used on it
thanks,
Ben

Bogdan visit website

24.06.2008 18:06:48

It seems the translation of my German text (http://blog.medianotions.de/de/artikel/2008/mootools-verschachteltes-accordion) is not very clear at this point, unlimited nestling is already included :-)

Daniel Buchner

24.06.2008 18:01:47

If you could extend your script to allow for unlimited leveling of nested ULs you would have something I have not yet seen in the wild from any library script! Plus people would really thank you, myself included! :)

Bogdan Günther visit website

24.06.2008 18:01:01

I didn’t have the time yet to take a deeper look at Mootools 1.2, but will do so definitely in the next weeks and decide then if there is still the need for my little script here or not :-)

Daniel Buchner

24.06.2008 18:00:40

Any chance you would be able to update this awesome script for Mootools 1.2 release?

Ryan Jauregui visit website

20.06.2008 01:20:56

Bogdan, I like your adaptation, very slick!

Bogdan visit website

10.06.2008 17:09:09

I am sorry Ewan, I am not into Joomla, I am a MODx guy. So if need MODx support - anytime!

Ewan McLean visit website

10.06.2008 13:03:46

Hello,

This looks excellent. Do you know of any easy way to apply it to a Joomla menu at all? We’d like to avoid handcoding the menu items if at all possible. Many thanks.

Ewan

Bogdan visit website

09.06.2008 17:58:47

Thanks Alvin, I am happy you like it.

Alvin

09.06.2008 10:11:26

That what i call a superb accordion. i have checked almost all accordion scripts out there, but this one is the best. Congratulations and keep working on moo scripts.

Bogdan visit website

02.06.2008 08:52:56

Thanks for the hint Marko. It seems this happend during the translation. Both links work again now.

Marko visit website

01.06.2008 19:41:50

Both demo and download links are broken.