More List Items

by Todd Levy

HTML

<div class="side_box symptoms_treated">    
    <h4>Symptoms Treated</h4>
    <ul class="info_list">
        <li>Hypertension (High Blood Pressure)</li>
        <li>Chest Pain</li>
        <li>Exhaustion</li>
        <li>Anemic Symptoms</li>
        <li>Difficulty Breathing</li>
        <li>Blacking Out/Fainting</li>
        <li>Fainting (Syncope)</li>
        <li>Heart Palpitations</li>
    </ul>
</div>

CSS

li {
    list-style:none;
    margin:0 0 1em 0;
    padding:0 0 1em 0;
    border-bottom:1px solid #e6e6e6;
}

JavaScript

(function ($) {
    $.fn.attachReadMoreLinkUl = function (options) {

        var params = {
            num: 10,
            read_text: 'See&nbsp;more&nbsp;&#8595;',
            hide_text: 'Hide&nbsp;&#8593;',
            more_class: ''
        };

        if (options && typeof options === 'object') {
            params = $.extend(params, options);
        }


        this.on('click', '.show_more', function (event) {
            event.preventDefault();
            event.stopPropagation();
            var h = $(this);
            var w = $(event.delegateTarget);
            h.parent().fadeOut(200, function () {
                w.find('li:gt('+ params.num +')').slideDown(function () {
                    w.find('li.hide_more_li').fadeIn(300);
                });
            });
        });

        this.on('click', '.hide_more', function (event) {
            event.preventDefault();
            event.stopPropagation();
            var h = $(this);
            var w = $(event.delegateTarget);
            h.parent().fadeOut(200, function () {
                w.find('li:gt('+ params.num +')').slideUp(function () {
                    w.find('li.show_more_li').delay(500).fadeIn(300);
                });
            });
        });

        this.each(function () {
            var h = $(this);
            var n = params.num - 1;
            if (h.children().length > params.num) {
                // HIDE EXTRA LIST ITEMS
                $(h).find('li:gt('+n+')').addClass(params.more_class).hide();   
                // ADD READ MORE LIST ITEM            
                $('<li class="show_more_li"><a href="#" class="read_more show_more" >' + params.read_text + '</a></li>').insertAfter(h.children().eq(n));
                // ADD HIDE MORE LIST ITEM  
                 $('<li class="hide_more_li" style="display:none;"><a href="#" class="read_more hide_more">' + params.hide_text + '</a></li>').insertAfter(h.children().last());                
            }
        });

     ...