473,378 Members | 1,555 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

MooTools Accordion Sliding Incorrectly

162 100+
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
3 1888
acoder
16,027 Expert Mod 8TB
You may find this tutorial useful.
Oct 27 '08 #2
empiresolutions
162 100+
@acoder - thanks much for the suggested link
Nov 4 '08 #3
acoder
16,027 Expert Mod 8TB
You're welcome :)
Nov 4 '08 #4

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

Similar topics

0
by: axxon | last post by:
hi, I am having a huge problem here! the scenario is i am trying to create dynamic accordion Panes to a accordion control inside a tab panel in a content page. It works just fine in a regular...
1
techtherapy
by: techtherapy | last post by:
Hi guys and gals, This is a mootools js question, for any of those familiar with it. I'm using the accordion on this page: http://admire.previsuals.com/productions/index.php/resources.php ...
2
by: LayneMitch via WebmasterKB.com | last post by:
Greetings. I'm reading this book that is teaching me the more appropriate way of assigning functions. It has an 'accordian' example that when you click on a link, it expands into other options...
4
by: ameshkin | last post by:
Hi Everybody, I'm just now learning javascript and I'm using mootools. What I want to do is to dynamically load a php page into accordian panel 2, depending on which radio button is selected in...
8
by: Tomasz J | last post by:
Hello developers, After migrating my web project application (using the old model) to .Net Framework 3.5 and Ajax Control Toolkit release 20820 the Accordion control no longer works correctly....
6
by: Andy B | last post by:
I am trying to use an accordion control from the ajax control toolkit for ..net3.5 sp1. When I put a link in one of the accordion pannel headerTemplates to open and close the content, I always get...
8
by: quipo | last post by:
Hi, im using an accordion script but it doesnt work if i use it with ajax. example: <div id="accordion"> <dl class="accordion" id="slider"> <dt>click here for the 1st pane</dt> ...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.