patternjavascriptMinor
Making an accordion from a multi-level HTML list
Viewed 0 times
multimakinglevelaccordionlistfromhtml
Problem
I am writing some code to turn a multi level UL into an accordion:
Can anyone tell me whether I am being relatively efficient or whether there is anywhere that I can "trim the fat", so to speak? The code also counts the number of children and displays that number on the main parent.
$(document).ready(function () {
$('.s4-ql li ul').each(function (index) {
$(this).hide();
});
$('.s4-ql ul li ul').each(function (index) {
var length = 0;
length = $(this).children().length;
var CurrentItem = $(this).parent().find('a:first');
CurrentItem.find('.menu-item-text').append('(' + length + ')');
});
$('.s4-ql ul li').hover(
function () {
$(this).find('a:first').next().slideToggle('normal');
},
function () {
$(this).find('a:first').next().slideToggle('normal');
}
);
});Can anyone tell me whether I am being relatively efficient or whether there is anywhere that I can "trim the fat", so to speak? The code also counts the number of children and displays that number on the main parent.
Solution
It'll be good if you can provide your HTML markup. Without it I can do this:
jQuery(function($) {
$('.s4-ql li ul').hide();
$('.s4-ql ul li').hover(function() {
$(this).find('a:first').next().slideToggle();
}, function() {
$(this).find('a:first').next().slideToggle();
}).find('ul').each(function(index) {
var $this = $(this);
$this.parent().find('a:first .menu-item-text').append(['(', $this.children().length, ')'].join(''));
});;
});Code Snippets
jQuery(function($) {
$('.s4-ql li ul').hide();
$('.s4-ql ul li').hover(function() {
$(this).find('a:first').next().slideToggle();
}, function() {
$(this).find('a:first').next().slideToggle();
}).find('ul').each(function(index) {
var $this = $(this);
$this.parent().find('a:first .menu-item-text').append(['<span style=\'float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join(''));
});;
});Context
StackExchange Code Review Q#6869, answer score: 3
Revisions (0)
No revisions yet.