jQuery Forum

Hi,

I am using slideDown() and slideUp() in an accordian style menu to reveal and conceal sections of the menu. By default it seems that these methods will open and close from the top or bottom respectively.

Is there a way to use the methods so that the bottom of the element seems to be being pulled down or pushed up rather than simply revealed or concealed?

I hope this makes sense. Any help would be greatly appreciated.

There are styling elements added dynamically to wrap each heading and section which is why they have containers and why the iteration through parents() is necessary.

1.                               <div id="accordian">
2.                                     <div class="accordian-button-container">
3.                                         <div id="content-home" class="accordian-button">Home</div>
4.                                     </div>
5.                                     <div class="accordian-heading-container">
6.                                         <div class="accordian-heading">                                               
7.                                             About
8.                                         </div>
9.                                     </div>
10.                                     <div class="accordian-section-container">
11.                                         <ul class="accordian-section">
12.                                             <li id="dialog-about-author">The Author</li>
13.                                             <li id="dialog-about-website">The Website</li>
14.                                         </ul>
15.                                     </div>
16.                                     <div class="accordian-heading-container">
17.                                         <div class="accordian-heading">
18.                                             Themes                                               
19.                                         </div>
20.                                     </div>
21.                                     <div class="accordian-section-container">
22.                                         <ul class="accordian-section">
23.                                             <li id="style-square-flat">Square Flat</li>
24.                                             <li id="style-square-glass">Square Glass</li>
25.                                             <li id="style-round-flat">Round Flat</li>
26.                                             <li id="style-round-glass">Round Glass</li>
27.                                         </ul>
28.                                     </div>
29.                                     <div class="accordian-heading-container">
30.                                         <div class="accordian-heading">
31.                                             Media                                               
32.                                         </div>
33.                                     </div>
34.                                     <div class="accordian-section-container">
35.                                         <ul class="accordian-section">
36.                                             <li id="content-image-viewer">Image Viewer</li>
37.                                             <li id="content-music-player">Music Player</li>
38.                                             <li id="content-video-player">Video Player</li>
39.                                         </ul>
40.                                     </div>   
41.                                 </div>

1. $('.accordian-heading').each(function () {
2.         $(this).addClass('outset');
3.         $(this).addClass('highlightable');
4.         $(this).click(function () {
5.             $(this).parents().each(function () {
6.                 if ($(this).attr('class') === 'accordian-heading-container') {
7.                     $(this).next().slideDown('slow');
8.                     $(this).addClass('expanded');
9.                 }
10.                 else if ($(this).attr('class') === 'accordian-heading-container expanded') {
11.                     $(this).next().slideUp('slow');
12.                     $(this).removeClass('expanded');
13.                 }
14.             });
15.         });
16.     });