33419970.md

This is what the controls HTML should look like.

    <div class="livery-section-footer clearfix"> 
        <a href="#" class="livery-button shop-button" data-show="more">Show More</a> 
        <a href="#" class="livery-button shop-button" data-show="less">Show Less</a> 
    </div>

This is what the JavaScript should look like.

    $(document).ready(function() {
        var images = $(".livery-journal-articles .handler").hide(), x = 1;
        var showMore = $('.livery-section-footer a[data-show="more"]');
        var showLess = $('.livery-section-footer a[data-show="less"]');
        var funcs = {
            'more': function() { ++x; show(); },
            'less': function() { --x; show(); }
        }
        $('.livery-section-footer').on('click', 'a[data-show]', function(e) {
            return (funcs[e.target.dataset.show]||function(){})(), false;
        });
        function show() {
            images.hide().filter(function(i) { return i < (x * 3); }).show();
            showMore.show().filter(function() { return !images.is(':hidden'); }).hide();
            showLess.show().filter(function() { return x === 1; }).hide();
        }
        show();
    });