By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,795 Members | 1,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,795 IT Pros & Developers. It's quick & easy.

MooTools Accordion Sliding Incorrectly

100+
P: 162
My issue is that I am using nested accordions and the second accordion in my nested list will not push the outer div down. The nested accordion slides beneath the main div container.

Another way to put it, if i load the page, then click on "Meeting 2" it accordions correctly. But when i click on "Task 2.1", that accordion for that section opens, but hides behind the containing div. Now if I then click "Meeting 1", everything opens fine, and then if i click "Meeting 2" again, the contents of "Task 2.1" show correctly in full.

Any Ideas? Thanks for the help.

Here is some code i think may be useful.

Moo 1.2 used with this addEvent javascript:
Expand|Select|Wrap|Line Numbers
  1. window.addEvent('domready', function() {
  2.     var meetingAccordion = new Accordion($$('.meeting_toggler'),$$('.meeting_element'),{
  3.  
  4.         opacity: false,
  5.         show : -1,
  6.  
  7.         onComplete:function(el){
  8.             if(el.getSize().y>0){
  9.                 el.setStyle('height','auto');
  10.             }
  11.         },
  12.  
  13.         onBackground:function(toggler,el){
  14.             el.setStyle('height',el.getSize().y);
  15.         }
  16.  
  17.     });
  18.     var taskAccordion = new Accordion($$('.task_toggler'),$$('.task_element'),{
  19.  
  20.         opacity: false,
  21.         show : -1,
  22.  
  23.         onComplete:function(el){
  24.             if(el.getSize().y>0){
  25.                 el.setStyle('height','auto');
  26.             }
  27.         },
  28.  
  29.         onBackground:function(toggler,el){
  30.             el.setStyle('height',el.getSize().y);
  31.         }
  32.  
  33.     });
  34.  
  35. });
  36.  
html
Expand|Select|Wrap|Line Numbers
  1. <div style="border:1px solid green">
  2.  
  3.     <div class="meeting_toggler">Meeting 1</div>
  4.  
  5.     <div class="meeting_element">
  6.  
  7.         <div class="task_toggler">Task 1.1</div>
  8.  
  9.         <div class="task_element">
  10.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  11.         </div>
  12.  
  13.         <div class="task_toggler">Task 1.2</div>
  14.  
  15.         <div class="task_element">
  16.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  17.         </div>
  18.  
  19.     </div>
  20.  
  21.     <div class="meeting_toggler">Meeting 2</div>
  22.  
  23.     <div class="meeting_element">
  24.  
  25.         <div class="task_toggler">Task 2.1</div>
  26.  
  27.         <div class="task_element">
  28.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  29.         </div>
  30.  
  31.         <div class="task_toggler">Task 2.2</div>
  32.  
  33.         <div class="task_element">
  34.             Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
  35.         </div>
  36.  
  37.     </div>
  38.  
  39. </div>
  40.  
Oct 26 '08 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
You may find this tutorial useful.
Oct 27 '08 #2

100+
P: 162
@acoder - thanks much for the suggested link
Nov 4 '08 #3

acoder
Expert Mod 15k+
P: 16,027
You're welcome :)
Nov 4 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.