Looking to create a dynamic nested list using jQuery for animations, but unsure of the best approach.
Currently, I'm adjusting the length of the parent list item and revealing the nested items.
The issue is that the parent item's length covers the nested items. I want to click on a nested item (like Edit Profile, Add Music, Playlists, etc) to trigger a different action. Right now, I'm just testing with alert prompts.
HTML
<div id="sidebar-menu" class="col-md-12">
<ul>
<li class="sidebar-menu-item" data-length="2"><span id="IWantToClickHere">Profile</span>
<ul class="blue-special sublist">
<li>Edit Profile</li>
<li>Other</li>
</ul>
</li>
<li class="sidebar-menu-item" data-length="2">Library [<span class="purple-special">3537</span>]
<ul class="blue-special sublist">
<li>Add Music</li>
<li>Playlists</li>
</ul>
</li>
<li class="sidebar-menu-item" data-length="0">Friends</li>
<li class="sidebar-menu-item" data-length="0">Stations</li>
<li></li>
<li class="sidebar-menu-item" data-length="0">Settings</li>
<li class="sidebar-menu-item" data-length="0">Logout</li>
</ul>
</div>
JS
$(document).ready(function() {
$('.sidebar-menu-item').click(function() {
//When: Menu is opened,
if ($(this).hasClass('opened-menu-item')) {
$(this).removeClass('opened-menu-item');
//Reset Menu-Item to default height of 20px per menu-item
$(this).animate({
height: "20px"
},
1000,
//Hide nested content
function() {
$(this).find('.sublist').css('display', 'none');
});
} else {
//When: Menu is closed
$(this).addClass('opened-menu-item');
$(this).find('.sublist').css('display', 'inherit');
//Set Menu-Item length to be the number of nested li * 35
var animateHeight = Number($(this).data("length")) * 35;
if (animateHeight != 0) {
$(this).animate({
height: animateHeight + "px"
},
1000);
}
}
});
});
Try out the jsfiddle here: http://jsfiddle.net/W4Km8/8065/