CODEWITHSUNDEEP
javascriptjquery
kiran
kiran

Reputation: 641

accordion menu list in javascript

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);

Upvotes: 3

Views: 98

Answers (3)

xxxmatko
xxxmatko

Reputation: 4142

I rewrote your example:

$(function() {
    var ext = "???";
    $("#wrapper").append(
    	'<ul id="demo-nav">'
            + '<li><strong>Demo Links</strong></li>'
            + '<li>'
                + '<a class="dropdown" href="#">Main Menu 1</a>'
                + '<ul>'
                    + '<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>'
                + '<a class="dropdown" href="#">Main Menu 2</a>'
                + '<ul>'
                    + '<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 href="#" class="blue close">[x] close</a>'
            + '</li>'
    	+'</ul>');
    $("a.dropdown + ul").hide(0);
    $("a.dropdown").click(function(e) {
        e.preventDefault();
    	$("a.dropdown").not(this).siblings("ul").hide(0);
    	$(this).siblings("ul").toggle();
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper"></div>

Upvotes: 0

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12892

You should add event handler after appending html. Change those statments with thier place. It should look like: 

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

Upvotes: 0

vijayP
vijayP

Reputation: 11512

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();
});

Upvotes: 2

Related Questions