HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Making an accordion from a multi-level HTML list

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
multimakinglevelaccordionlistfromhtml

Problem

I am writing some code to turn a multi level UL into an accordion:

$(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.