accordion menu list in javascript

Question

I am trying to get show and hide menu in javascript only. Below code I have so far. For some reason its not working.

Can anyone help me?

var menuHtm = '<ul id="demo-nav">'
    +'<li><strong>Demo Links</strong></li>'
    +'<li class="dropdown"><a href="../home/page1.html'+ext+'">Main Menu 1</a>'
    +'<ul style="display : none;text-decoration:none;">'
    +'<li><a href="../home/page2.html'+ext+'">Sub menu 1</a></li>'
    +'<li><a href="../home/page3.html'+ext+'">Sub menu 2</a></li>'
    +'</ul></li>'
    +'<li class="dropdown"><a href="../home/page4.html'+ext+'">Main Menu 2</a>'
    +'<ul style="display : none;text-decoration:none;">'
    +'<li><a href="../home/page5.html'+ext+'">Sub menu 1</a></li>'
    +'<li><a href="../home/page6.html'+ext+'">Sub menu 2</a></li>'
    +'</ul></li>'
    +'<li><a class="blue close" style="text-decoration:none; line-height:20px; cursor:pointer;">[x] close</a></li>'
    +'</ul>';

$('li.dropdown').click(function() {
    $('li.dropdown').not(this).find('ul').hide();
    $(this).find('ul').toggle();
});

$('#wrapper').append(menuHtm);

Answer 1

Please add click() event listener after adding your menu to $('#wrapper') like follows:

$('#wrapper').append(menuHtm);

$('li.dropdown').click(function() {
       $('li.dropdown').not(this).find('ul').hide();
       $(this).find('ul').toggle();
});