Show Hidden Submenu onclick - JQuery

Question

I like the great Code from JRulle:

http://jsfiddle.net/jrulle/23kfnbx7/3/

Can anyone explain me how to use the complete parent-link instead of the image for open the sub menu? And that only one sub menu is shown up to the same time?

I tried to realize that, but all i got is - the sub menu is shown up by clicking the link

but the arrows does not change.

    $('li.parent').on("click",function(){
       $(this).children('a').siblings('ul.children').slideToggle();
    });

Sorry for misspelling something, a big thank's for your help and greetings from germany.

Answer 1

You need to bind click event to the links as well. So, please change this

$('li.parent').on("click",

to this

$('.parent img, .parent a').on("click",

Here is a demo: https://jsfiddle.net/23kfnbx7/8/

    $('.parent img, .parent a').on("click", function () {
        var img = $(this);
        if ($(this).next('img').length) {
            var img = $(this).next('img');
        }
        if (img.hasClass('open')) {
            img.removeClass('open');            
            img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png');            
        } else {
            img.addClass('open');
            img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png');
        }
       img.siblings('ul.children').toggle();
    });