Nested Decimal Lists

This plugin lets you display nested decimal lists of any depth, with correctly numbered sub sections (because support for CSS Counters is currently very patchy). Users without JavaScript will just see standard ordered lists.

Download

Click here to Download (Version 1.0) »

Options

Option Type Required Default Description
trailingPeriod boolean no true Determines whether a trailing period is displayed after the item number (1.0. as opposed to 1.0)
zeroStart boolean no false If true, list numbering starts from zero rather than one.
numberClass string no 'nesteddecimallistnumber' The CSS class to be assigned to the list numbers.

Examples

Basic nested decimal list:

$(document).ready(function(){
    $('#example1').nestedDecimalList();
});
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur augue vitae justo egestas semper.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur augue vitae justo egestas semper.
    2. Mauris aliquam orci et nisi pellentesque elementum. Morbi non sagittis nunc.
    3. Donec est nisl, tempus nec congue eget, viverra eget enim.
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur augue vitae justo egestas semper.
      2. Mauris aliquam orci et nisi pellentesque elementum. Morbi non sagittis nunc.
      3. Donec est nisl, tempus nec congue eget, viverra eget enim.
    4. Duis blandit massa aliquet mauris iaculis tempor. Mauris id urna et nunc pharetra interdum vel at urna.
  2. Mauris aliquam orci et nisi pellentesque elementum. Morbi non sagittis nunc.
  3. Donec est nisl, tempus nec congue eget, viverra eget enim.
  4. Duis blandit massa aliquet mauris iaculis tempor. Mauris id urna et nunc pharetra interdum vel at urna.

Styled numerals, starting from zero, with trailing period:

$(document).ready(function(){
    $('#example2').nestedDecimalList({ trailingPeriod: true, 
                                       numberClass: 'purpleNumbers', 
                                       zeroStart: true });
});
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur augue vitae justo egestas semper.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur augue vitae justo egestas semper.
    2. Mauris aliquam orci et nisi pellentesque elementum. Morbi non sagittis nunc.
    3. Donec est nisl, tempus nec congue eget, viverra eget enim.
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consectetur augue vitae justo egestas semper.
      2. Mauris aliquam orci et nisi pellentesque elementum. Morbi non sagittis nunc.
      3. Donec est nisl, tempus nec congue eget, viverra eget enim.
    4. Duis blandit massa aliquet mauris iaculis tempor. Mauris id urna et nunc pharetra interdum vel at urna.
  2. Mauris aliquam orci et nisi pellentesque elementum. Morbi non sagittis nunc.
  3. Donec est nisl, tempus nec congue eget, viverra eget enim.
  4. Duis blandit massa aliquet mauris iaculis tempor. Mauris id urna et nunc pharetra interdum vel at urna.