JQuery Toggle Button and Accordion Problem

Question

I have a "Menu" btn that should slide-open a div with an "accordion" menu in it.

When I add the value hide() (in JS) or "hidden" (in CSS) for the div that contains the accordion, the accordion stops working properly. It doesn't view all the content in it when you click on an accordion section, after opening the div with the accordion with the Menu btn.

The reason I'm hiding the div with the accordion, is that it should be closed until you press the Menu btn.

Code for Accordion:

<script type="text/javascript">
    $(function() {
    //  $('.effect').hide();
        $("#moduleMenu1, #moduleMenu2").accordion({collapsible: true, active: false});
    });
</script>

Code for Menu btn:

<script type="text/javascript">
    $(function() {
    $(".moduleMenuBtn").click(function() {
        var effect = $('slide').val();
        var options = {};
        $(this).parent().next(".effect").toggle(effect,options,500);
        return false;
    });
});
</script>

Notice that the script for the Menu btn doesn't "slide" open the div with the accordion, it just popps out without the "slide" animation?

HTML

<div class="effect">
                    <div id="moduleMenu1">
                        <h3><a href="#">Section1</a></h3>
                        <div>
                          <p>Some Content</p>
                        </div>
                    </div>
                  </div>

Answer 1

You have the first part correct

$("#moduleMenu1, #moduleMenu2").accordion({
      collapsible: true, active: false
});

If you run it with just that it shows with all sections allowed to be closed and none of them open.

The problem is that you fire the click event on the menu button which opens the content for #moduleMenu1 open.

Also

$('.effect').hide();

Actually hides the entire menu and content section, not what you want.