trying to make an accordion menu from a list - jquery indexhibit
- by orionrush
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 second condition things break down. . .
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 the if things get weird
if (menu_items.is(".xx"))
menu_items.hide(speed); //Take the menu item off of active duty!
}
)
}
}
