JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<div class="state-indicator"></div>
<div class="section list-flex">
    <ul class="list-group" data-max-items="3" id="list-group-1">
        <li class="list-group-item">
            <p class="list-group-item-heading">.list-group-item-headingg</p>
            <p class="list-group-item-text">.list-group-item-text</p>
            <p class="list-group-item-secondary">.list-group-item-secondary</p>
        </li>
        <li class="list-group-item">
            <p class="list-group-item-heading">Second List Group Item Heading</p>
            <p class="list-group-item-text">List Group Item Text</p>
        </li>
        <li class="list-group-item">
            <p class="list-group-item-heading">Another List Group Item Heading</p>
            <p class="list-group-item-text">List Group Item Text</p>
        </li>
        <li class="list-group-item list-group-secondary">
            <p class="list-group-item-heading">Item Heading</p>
            <p class="list-group-item-text">Item Text</p>
        </li>
        <li class="list-group-item list-group-secondary">
            <p class="list-group-item-heading">Item Heading</p>
            <p class="list-group-item-text">Item Text</p>
        </li>
        <li class="list-group-item list-group-secondary">
            <p class="list-group-item-heading">Item Heading</p>
            <p class="list-group-item-text">Item Text</p>
        </li>
        <li class="list-group-item list-group-secondary">
            <p class="list-group-item-heading">Item Heading</p>
            <p class="list-group-item-text">Item Text</p>
        </li>
        <li class="list-group-item list-group-secondary">
            <p class="list-group-item-heading">Item Heading</p>
            <p class="list-group-item-text">Item Text</p>
        </li>
        <li class="list-group-item list-group-secondary">
            <p class="list-group-item-heading">Item Heading</p>
            <p class="list-group-item-text">Item Text</p>
        </li>
    </ul>
    <ul...

CSS

.state-indicator {
    position: absolute;
    top: -999em;
    left: -999em;
}
.state-indicator:before {
    content:'desktop';
}
/* small desktop */
 @media all and (max-width: 1200px) {
    .state-indicator:before {
        content:'small-desktop';
    }
}
/* tablet */
 @media all and (max-width: 1024px) {
    .state-indicator:before {
        content:'tablet';
    }
}
/* mobile phone */
 @media all and (max-width: 768px) {
    .state-indicator:before {
        content:'mobile';
    }
}

JavaScript

(function () {
    'use strict'

    // CONSTANTS
    var STATE_SELECTOR = '.state-indicator'


    var component = {
        ui: {
            $listGroup: $('.list-group')
        },
        tpl: {
            btn: [
                '<li class="list-group-item text-center visible-mobile">',
                    '<button class="btn toggle-button btn-default" type="button">Show more</button>',
                '</li>'
            ].join('')
        },
        initialize: function () {
            this.onWindowResize().bind()
        },
        bind: function () {
            $(window).on('resize orientationchange', this.onWindowResize.bind(this))
            this.ui.$listGroup.on('click', 'button', this.onBtnClicked.bind(this))
            return this
        },
        onBtnClicked: function (e) {
            this.toggleContents($(e.delegateTarget))
        },
        toggleContents: function ($ul) {
            var isOpened = $ul.hasClass('opened')
            this[isOpened ? 'hideContents' : 'showContents']($ul)
            return this
        },
        hideContents: function ($ul) {
     
            var visibleContentsAmount = $ul.data('max-items'),
                $lastVisibleLi = $ul.find('li').eq(visibleContentsAmount - 1)
            
            $ul.removeClass('opened')
            
            $lastVisibleLi.nextAll().addClass('hidden').hide()
            $ul.append(this.tpl.btn)

            return this
        },
        showContents: function ($ul) {
            var $btn = $ul.find('button.toggle-button'),
                $hiddenLis = $ul.find('li.hidden')
             
            $hiddenLis.removeClass('hidden').show()
            
            if ($btn.length)
                $btn.parent().remove()
  
            
            return this
        },
        onWindowResize: function () {
            var state = window.getComputedStyle(document.querySelector(STATE_SELECTOR), ':before').getPropertyValue('content')
           ...