JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div class="photos js-hide-toggle">
<ul>
    <li>one</li>
    
    <li>two</li>
    
    <li>three</li>
    
    <li>four</li>
    
    <li>five</li>
    
       <li>six</li>
    
    <li>seven</li>
    
    <li>eight</li>
    
    <li>nine</li>
    
    <li>ten</li>
    
        <li>eleven</li>
    
    </ul>
</div>

CSS

ul {
    list-style: none;
}

li {
    width: 40px;
    height: 100px;
    background: red;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 5px;
}

JavaScript

(function($) {
    // This function takes two optional parameters:
    // The first is the text to be displayed
    // The other is the number of elements that the text should be appended after (generally assuming this is being used on an <li>
    var methods = {
        init: function(options) {
            // Create some defaults, extending them with any options that were provided
            var settings = $.extend({
                'toggleText': 'Show more...',
                'wrapAfter': '5' // number of elements to start wrapping after
            }, options);

            return this.each(function() {
                var wrapAfter = $(this).find('li').eq(options.wrapAfter - 1);

                wrapAfter.nextAll().wrapAll('<div id="js-hidden-area" style="display: none;" />');

                // Tooltip plugin code here
                $(this).append('<a href="#" id="js-hide-toggle-text">' + settings.toggleText + '</a>');

                $('#js-hide-toggle-text').click(function() {
                    $('#js-hidden-area').slideToggle();
                });
            });

        }
    };

    $.fn.toggleText = function(method) {

        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            return false; 
        }

    };

    $('.js-hide-toggle').toggleText({
        'toggleText': 'Show all galleries',
        'wrapAfter': '7'
    });
})(jQuery);