CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

Animation of dynamically generated menu not working properly

I have one left side menu, which has multiple parent menus and under them certain child menus. I want to provide these menus a functionality similar to accordion. Like if I select one menu item, then its child menus will get visible (slideDown animation) and the child menu of the active parent menu will hide (slideUp animation). In addition to this functionality, the selected menu will always be on top and other menus will come under it.

Below is the code snippet for the same:

$(document).ready(function(){
$('.dropdown').find('li:eq(0)').addClass('active');
    $('.dropdown').find('[data-id="parentmenu"]').each(function () {
        if ($(this).hasClass('active') == false) {
            $(this).find('ul').slideUp(10);
        }
    });
    $('ul.dropdown').on('click', '[data-id="parentmenu"]', function () {
        $(this).siblings('[data-id="parentmenu"]').removeClass('active');
        $(this).siblings('[data-id="parentmenu"]').each(function () {
            $(this).find('ul').slideUp(500);
        });
        $(this).addClass('active');
        $(this).find('ul').show().slideDown(500);
        $markupHTML = "<li data-id='parentmenu'>" + $(this).html() + "</li>";
        $($markupHTML).insertBefore($('.dropdown').find('li:eq(0)'));
        $(this).remove();
    });

});
ul.dropdown {
    margin: 0;
    padding: 0;
}
.dropdown {
    font-size: 14px;
    height: 20px;
    width: 203px;
}
ul.dropdown li a {
    color: #7f7f7f;
    display: block;
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 7px;
    text-decoration: none;
}
ul.dropdown li {
    border-bottom: 2px solid #91a6ca;
    list-style: outside none none;
    margin-bottom: 7px;
}
#left_panel {
    background-color: #fff;
    float: left;
    min-height: 700px;
    min-width: 230px;
    padding: 15px 3px;
    width: 12%;
}
.ui-resizable {
    position: relative;
}
.vdr-left-nav {
    float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vdr-left-nav ui-resizable" id="left_panel">
<ul class="dropdown">
    <li data-id="parentmenu" class="active">
        <a title="" href="#" class="snacks"> Menu 1</a>
        <ul>
            <li data-id="childmenu"> <a href="#">Child Menu 1</a></li>
            <li data-id="childmenu"> <a href="#">Child Menu 2</a></li>
        </ul>
    </li>
    <li data-id="parentmenu">
        <a title="" href="#" class="snacks"> Menu 2</a>
        <ul >
            <li data-id="childmenu"><a href="#">Child Menu 3</a></li>
            <li data-id="childmenu"><a href="#">Child Menu 4</a></li>
        </ul>
    </li>
    <li data-id="parentmenu">
        <a title="" href="#" class="snacks"> Menu 3</a>
        <ul >
            <li data-id="childmenu"><a href="#">Child Menu 5</a></li>
            <li data-id="childmenu"><a href="#">Child Menu 6</a></li>
        </ul>
    </li>
</ul>
</div>

The code is almost working properly, except that I could not get the slideDown animation to work for the top most selected menu item. The selected menu is just shown and the animation just does not work at all.

Also tried with $(this).find('ul').slideDown(500).show(); but this is also not working. What am I doing wrong?

Any help will be appreciated.

Here is a Fiddle for the same as well.

Upvotes: 0

Views: 62

Answers (2)

user5200704
user5200704

Reputation: 1709

I think your code is ok but some little mistake found before slideDown() to call show() and append new li element content so do you need to display first element slide down after added top.

$(document).ready(function(){
$('.dropdown').find('li:eq(0)').addClass('active');
    $('.dropdown').find('[data-id="parentmenu"]').each(function () {
        if ($(this).hasClass('active') == false) {
            $(this).find('ul').slideUp(10);
        }
    });
    $('ul.dropdown').on('click', '[data-id="parentmenu"]', function () {
        $(this).siblings('[data-id="parentmenu"]').removeClass('active');
        $(this).siblings('[data-id="parentmenu"]').each(function () {
            $(this).find('ul').slideUp(500);
        });
        $(this).addClass('active');
        //$(this).find('ul').show().slideDown(500);

        $markupHTML = "<li data-id='parentmenu'>" + $(this).html() + "</li>";
        $($markupHTML).insertBefore($('.dropdown').find('li:eq(0)'));
        $(this).remove();
        $('.dropdown').find('li:eq(0)').find('ul').slideDown(500);
    });

});

https://jsfiddle.net/w0d8sdvo/3/

Upvotes: 1

Thomas W
Thomas W

Reputation: 14164

I'd suspect the $markupHTML rewriting is quite a likely candidate for your animation not to be working.. as it's creating/ rewriting DOM elements.

As a side note, I find the order of menu items moving around poor usability from a UX perspective.

Upvotes: 0

Related Questions