Native List toggler

index.html

<div class="speech-l">
     <h4>Brands</h4>

    <ul>
        <li><a class="all" href="#">Hello</a>

        </li>
        <li><a class="all" href="#">Joe Rocket <em>(57)</em></a>

        </li>
        <li><a class="all" href="#">Joe Rocket <em>(57)</em></a>

        </li>
        <li><a class="all" href="#">Joe Rocket <em>(57)</em></a>

        </li>
        <li><a class="all" href="#">Joe Rocket <em>(57)</em></a>

        </li>
        <li><a class="all" href="#">Joe Rocket <em>(57)</em></a>

        </li>
        <li><a class="all" href="#">Joe Rocket <em>(57)</em></a>

        </li>
        <li><a class="all" href="#">Icon <em>(42)</em></a>

        </li>
        <li><a class="all" href="#">Fieldsheer <em>(37)</em></a>

        </li>
        <li><a class="all" href="#">Tour Master <em>(21)</em></a>

        </li>
        <li><a class="all" href="#">AGV Sport<em>(21)</em></a>

        </li>
        <li><a class="all" href="#">Alpinestars<em>(21)</em></a>

        </li>
        <li><a class="all" href="#">Cortech<em>(21)</em></a>

        </li>
        <li><a class="all" href="#">Element<em>(21)</em></a>

        </li>
        <li><a class="all" href="#">Fieldsheer<em>(21)</em></a>

        </li>
    </ul>
</div>

listtoggle.js

(function (undefined) {
    var divs = document.getElementsByClassName('speech-l'),
        i;
    for (i = 0; i < divs.length; i++) {
        (function () {
            var ul = divs[i].getElementsByTagName('ul'),
                items,
                hiddenElements = [],
                showCaption,
                hideCaption,
                min,
                toggler, l, j;

            if (ul.length == 0) {
                return;
            }
            ul = ul[0];
            items = ul.getElementsByTagName('li');

            var min = ul.getAttribute('data-min');
            if (min === null) {
                min = 3;
            }
            
            if (items.length <= min) {
                return;
            }

            for(l = min, j = items.length; l<j;l++) {
                hiddenElements.push(items[l]);
                items[l].style.display = 'none';
            }
            
            showCaption = 'View ' + hiddenElements.length + ' more comments...';
            hideCaption = 'View ' + hiddenElements.length + ' less comments...';
            toggler = document.createElement('li');
            toggler.appendChild(document.createTextNode(showCaption));
            toggler.style.cursor = 'pointer';
            toggler.setAttribute('data-state', 'more');
            toggler.onclick = function () {
                var k, state, newstate;
                state = this.getAttribute('data-state');
                if (state === 'more') {
                    newstate = 'less';
                    for(k=(hiddenElements.length-1); k>0; k--) {
                        hiddenElements[k].style.display = 'block';
                    }
                } else {
                    newstate = 'more';
                    for(k=(hiddenElements.length-1); k>0; k--) {
                        hiddenElements[k].style.display = 'none';
                    }
                }
                this.textContent = this.textContent.replace(state, newstate);
                this.setAttribute('data-state', newstate);
            };
            ul.appendChild(toggler);
        })();
    }

    /*$('.speech-l').each(function () {
        var ul = $('ul', this),
            items = ul.children(),
            min = ul.attr('data-min');

        if (min === undefined) {
            min = 3;
        }

        if (items.length <= min) {
            return false;
        }
;

        $('<li>', {
            text: showCaption,
            css: {
                cursor: 'pointer'
            },
            click: function () {
                hiddenElements.toggle(888);
                $(this).text(function (idx, oldText) {
                    return (oldText == showCaption) ? hideCaption : showCaption;
                });
            }
        }).appendTo(ul);
    });*/

})();