Creating an accordion for wordpress with jquery, need help!

Question

I'm creating an accordion for wordpress and I can't seem to figure what I am doing wrong.

Ultimately I am trying to have the child elements hidden, and when the parent has been activated the child will appear.

JS:

<script>
    $(document).ready(function() { //hide child page
        $('#content ul.menu ul li').hide();
        //when navigate to a child page show all pages
        $('#content ul.menu li.current-menu-item').parent("ul").show();
        //show page list when toggle
        $('#content ul.menu ul li.active ul').show();
        //show cerrent page's child page
        $('#content ul.menu ul li.current-menu-item ul').show();

        $('#content .menu ul li').click(function() {
            $(this).addClass("active");
            $(this).children('ul').slideToggle("slow");
        });
    });
</script>

The site: www.svadsi.info

Thanks in advance.

Answer 1

Wordpress doesn't always play nice with jquery.

First you want to wrap your code in

$(function() {

instead of

$(document).ready(function() {

Also, I would recommend using

.addClass('hidden');

and

removeClass('hidden');

instead of .hide(); and .show(); when dealing with the same problem.

Please feel free to follow up with comments and I'll help you troubleshoot.

Answer 2

Can you explain you problem more please.

You should caught the click event on li cause it bubble

    $('#content .menu ul li').click(function(e) {
        $(e).stopPropagation();
        $(this).addClass("active");
        $(this).children('ul').slideToggle("slow");
    });