CODEWITHSUNDEEP
jquerycss
Zeroic
Zeroic

Reputation: 251

jquery function not work

iam creating accordion menu with jquery + css3 everything going fine expect that the menu always open when page load and the code to hide it not working this is the fiddle i created

This is my jquery code

   $(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');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.zero_menu_content').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN 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');
         } 

     });


    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    //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');                                        
    });

    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/


    /********************************************************************************************************************
    CLOSES ALL S ON PAGE LOAD
    ********************************************************************************************************************/   
    $('.zero_menu_content').hide();

});

this is the full fiddle

http://jsfiddle.net/YU6nZ/

Upvotes: 2

Views: 90

Answers (6)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Try this,

 $(document).ready(function() {
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/   
$('.zero_menu_content').hide();

//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');

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.zero_menu_content').slideUp('normal');

    //IF THE NEXT SLIDE WASN'T OPEN THEN 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');
     } 

 });


/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//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');                                        
});

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/




});

i have just put your hide() at the starting in,

$(document).ready(function(){

});

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Add this CSS rule to make your accordion content hidden by default:

.zero_menu_content {
    display: none;
}

UPD. This version will also fix syntax error in your code:

http://jsfiddle.net/dfsq/YU6nZ/15/

I also removed $('.zero_menu_content').hide(); which is not needed if you use CSS solution.

Upvotes: 5

MarcinJuraszek
MarcinJuraszek

Reputation: 125620

You have following JavaScript error:

Uncaught Error: Syntax error, unrecognized expression: .

When moving over:

$('.').mouseover(function() {
    $(this).addClass('over');

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
    $(this).removeClass('over');                                        
});

Should be:

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
$('.zero_menu_content_row').mouseover(function() {
    $(this).addClass('over');

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
    $(this).removeClass('over');                                        
});

Correct fiddle: http://jsfiddle.net/YU6nZ/12/

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

You have one error too.

$('.').mouseover(function() {
    $(this).addClass('over');
}).mouseout(function() { $(this).removeClass('over'); });

You will get undefined expression . in console. So execution of code terminated there.

Upvotes: 1

Álvaro González
Álvaro González

Reputation: 146450

Find out how to open your browser's JavaScript console. Mine shows this error:

Syntax error, unrecognized expression: .

... triggered by this code:

$('.').mouseover(function() {
  ^^^

Not sure of how that code should look but accordion works fine if you remove the complete block.

Upvotes: 2

Merec
Merec

Reputation: 2761

//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');                                        
});

This create a JS error so $('.zero_menu_content').hide(); is not fired. Take a look at the console.

Upvotes: 0

Related Questions