Question

I’m pretty new to jQuery so I’m trying to get working a small piece of code.
I’m trying to create sort of an accordion menu.

First, (after looking at some tutorials) I did something very similar to what I wanted:

<script type="text/javascript">
$(document).ready(function(){
    $(".content").hide();
    mainmenu();
});

function mainmenu(){        
    $(".option").click(function(){
            $(".content").slideUp("slow");
            $(this).children("div.content").slideDown("slow");
    });
}

It worked fine but it did the “hide” + “show” animation if I clicked an opened option.

So, I tried to add a condition to get the menu doing what I wanted, but it doesn’t work. Even the content hiding at the begining now doesn’t work.

The piece of code that now doesn’t work is this one:

<script type="text/javascript">
$(document).ready(function(){
    $(".content").hide();
    mainmenu();
});

function mainmenu(){        
    $(".option").click(function(){
            if (($(this).children("div.content").is(":hidden")){
                $(".content").slideUp("slow");
                $(this).children("div.content").slideDown("slow");
            }else{
                $(".content").slideUp("slow");
            }
    });
}

So, if the content is not hidden, it should just hide the content instead of hide and show again.

I don’t know if I’m approaching the problem in a bad way or what. I’m very new to this.

If somebody can help me, I will really appreciate it.

Thanks.

EDIT: I missed one parenthesis at the if statement. It’s now working! BTW thank you very much

Answer 1

Looks like a typo.

if (($(this).children("div.content").is(":hidden")){

should be

if ($(this).children("div.content").is(":hidden")){