trying to make an accordion menu from a list - jquery indexhibit

Question

Hello - Im teaching my self javascript & jquery so this might be a bit of a low brow question or entirely too much code for anyone to wade through, but Im hoping for some feedback. I have looked around and haven't found a thread that looks like it will deals neatly with my question.

Im using the cms indexhibit (cant create a new tag!) and trying to create an accordion style menu from the menu list it generates. I basically have the behaviour Im after, modifying an existing bit of work but there are quite a few foibles, which are no doubt a conflict between the .click and .toggle and a confused use if statements.

I basically want to start from scratch and redo this so I can a) learn from my mistakes b) understand what's happening. Im having trouble now because I dont know where to go from here, or how to trouble shoot it.

Can anyone give me a quick analysis how the the script in the head of the document work together? Also any insight into the nature of the conflicts Im seeing and what approach might take to remedy them? If you were going to start afresh what would be your approach?

Here is a test to see it in action (warts and all): http://stillstatic.nfshost.com/

---

This script goes into the document head:

<script type='text/javascript'> //im not entirely clear as to what this achieves
path = 'path/to/script/';
$(document).ready(function() { 
setTimeout('move_up()', 1); 
expandingMenu(0); 
expandingMenu(1);
expandingMenu(2);
expandingMenu(3);
expandingMenu(4);
//etc
});
</script>

---

the generated list:

 <ul> 
 <li class='section-title active_menu'>blogs</li> 
 <li><a class="active" href='#' onclick="do_click();">3</a></li> 
 </ul> 

 <ul> //this menu section dose not have a label: class .section-title
 <li><a href='#' onclick="do_click();">1</a></li>
 <li><a href='#' onclick="do_click();">2</a></li> 
 </ul> 

 <ul> //this menu section is not the 'active menu' this is achieved by the jquery script
 <li class='section-title'>writing</li> 
 <li><a href='#' onclick="do_click();">4</a></li> 
 <li><a href='#' onclick="do_click();">5</a></li> 
 </ul> 

---

The meat of in an external script:

function expandingMenu(num) {
var speed = 500;
var menu_title = $("#menu ul").eq(num).children(":first"); // ie. first child be the         title with the class .section-title unless the user turned it off 
var menu_items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; }); // ie. any li NOT in position 0, below li.section-title

if (menu_items.is(".active") == true) {
menu_title.addClass("active_menu"); //Add a class to the active list so we can style it.
}   
if (menu_title.is(".section-title") == true){ // this if prevents interference with users who turn off the section titling

if ((menu_items.is(".active") == false) && (menu_items.is(":visible"))  )  {
 menu_items.hide(0);// first we hide the inactive exhibits
 } 

$('li').click(function (){
if ( (menu_title.is(":visible") == true)  ){
menu_items.hide(speed);
  }
if ( (menu_items.is(":hidden") == true ) && (('')) ){// ?! without this EMPTY second condition things break down??? hu?. . .
menu_items.show(speed);
}
})   

menu_title.css({cursor:"pointer"}).toggle( // add click functions + pointer to     menu_title
function () {
menu_items.show(speed);//Open it up
}, 
function () {
// this function could even be empty but without a pointless 'if' things get really weird
if (menu_items.is(".xx")) 
menu_items.hide(speed); //Take the menu item off of active duty!
}
)
 }  
}

Answer 1

You're right - lots of code to wade through (and currently formatted wrong).. your sample seems to run - what exactly is the problem with it?

As for the code in the head - move_up() isn't defined in your code (the setTimeout)

expandingMenu(0) - expands the first li, theoretically. THis should be in a document ready, and probably a bit more elegant:

$("#menu ul li").click();

jqueryui.com has a great accordion plugin