Currently, I am in the process of setting up an accordion menu using jQuery and CSS3. Everything is working perfectly fine so far except that the menu always opens upon page load and the code to hide it is not functioning as intended. Here's the link to the fiddle I have created:
Here is the jQuery code snippet I am working with:
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.zero_menu_title_collapse').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.zero_menu_title_collapse').removeClass('on');
//CLOSE ALL OPEN SLIDES REGARDLESS
$('.zero_menu_content').slideUp('normal');
//CHECK IF THE NEXT SLIDE IS HIDDEN AND OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
//CLOSES ALL S ON PAGE LOAD
$('.zero_menu_content').hide();
});
For the complete fiddle example, you can visit the following link: