jQuery Expander & Unordered Lists

Question

I'm trying out the jQuery expander plugin found here. It works great when dealing with regular text, but behaves a little weird when the slice point is in the middle of an <LI> tag.

Any tips/suggestions on how to get this to behave a little more gracefully? Here's what i'd be looking for in order of preference:

• Read More on same line as the split list item, and expanding shows the rest of the list items
• Change it so we don't split in the middle of a list item, and show the remaining list items in another unordered list below it

I'm a little new to jQuery, so bear with me a little bit. If you have any questions, leave me a comment and I'll update my post.

Thanks!

Answer 1

To get this kind of behaviour will probably require a lot of hacking to expander, which is probably more trouble than it's worth. It was really designed for inline elements and not a series of block elements. Anyhow, here is a custom made snippet that should hopefully do what you want:

fiddle: http://jsfiddle.net/garreh/z9JwJ/

---

var de = {
  0: {
    html: '<span class="read_more"><a href="javascript:">Read more</a></span>',
    classname: '.read_more'
  },

  1: {
    html: '<span class="read_less"><a href="javascript:">Read Less</a></span>',
    classname: '.read_less'
  }
};

function toggle(show)
{
  var $li = $('.expandable ul > li');
  var len = $li.length - 1;
  var xy = (show ? [len, 0] : [0, 1]);

  $li.each(function(index) {

    if (index) {
      $(this)[show ? 'show' : 'hide']();
    }

    if (!index || index == len) $(de[xy[1]].classname, this).remove();

    if (index == xy[0])
    {
      var $toggle = $(de[show].html);
      $toggle.find('a').click(function() {
        toggle(xy[1]);
      });
      $(this).append($toggle);
    }

  });
}

toggle(0);