JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div class="content show-expanded">
    <div class="well expanded">
        <div class="items">
            <div class="item item-1"></div>
            <div class="item item-2"></div>
            <div class="item item-3"></div>
            <div class="item item-4"></div>
            <div class="item item-5"></div>
            <div class="item item-6"></div>
            <div class="item item-7"></div>
            <div class="item item-8"></div>
            <div class="item item-9"></div>
            <div class="item item-10"></div>
            <div class="item item-11"></div>
            <div class="item item-12"></div>
            <div class="item item-13"></div>
            <div class="item item-14"></div>
            <div class="item item-15"></div>
        </div>
    </div>
    <div class="well collapsed">
        <div class="items">
            <div class="item item-1"></div>
            <div class="item item-2"></div>
            <div class="item item-3"></div>
            <div class="item item-4"></div>
            <div class="item item-5"></div>
            <div class="item item-6"></div>
            <div class="item item-7"></div>
            <div class="item item-8"></div>
            <div class="item item-9"></div>
            <div class="item item-10"></div>
            <div class="item item-11"></div>
            <div class="item item-12"></div>
            <div class="item item-13"></div>
            <div class="item item-14"></div>
            <div class="item item-15"></div>
        </div>
    </div>
</div>
<div class="toggle">
    X
</div>

SCSS

*{
    box-sizing: border-box;
}
.content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    background-color: #ccc;
}

.well{
    width:100%;
    transition: opacity .5s;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    opacity: 0;
    &.expanded{
        background-color: #ddd;
        .show-expanded & {
            z-index: 2;
            opacity: 1;
        }
    }
    &.collapsed{
        background-color: #bbb;
        .show-collapsed & {
            z-index: 2;
            opacity: 1;
        }
    }
}

.item{
    border:1px solid black;
    .expanded & {
        height: 500px;
    }
    .collapsed &{
        height: 50px;
    }
}

$colors-list: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;
@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    .item-#{$i} {
        background-color: nth($colors-list, $i);
    }
}

.toggle{
    font-size: 30px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: orange;
    color: white;
    z-index: 3;
    cursor: pointer;
}

JavaScript

var $content = $(".content"),
    $toggle = $(".toggle");

$("body").on("click", ".toggle", function(e){
    e.preventDefault();
    e.stopPropagation();
    $content.syncPos();
    $content.data('syncPos').sync().toggleClass("show-expanded show-collapsed");
});


(function($) {

    $.syncPos = function(element, options) {

        var defaults = {
            
        }

        var plugin = this;

        plugin.settings = {}

        var $element = $(element),
             element = element;

        plugin.init = function() {
            plugin.settings = $.extend({}, defaults, options);
            // code goes here
            plugin.$wellExpanded = $(".well.expanded");
            plugin.$wellCollapsed = $(".well.collapsed");
            plugin.sync();
            $element.on("click", plugin.sync());
        }

        plugin.sync = function() {
            // code goes here
            visibleWell();
            
            return $element;
        }
        
        var visibleWell = function(){
            var visible = "collapsed";
            console.log($element.hasClass("show-expanded"));
            if ($element.hasClass("show-expanded")){
                visible = "expanded";   
            }
                console.log(visible);
            return visible;
        }

        plugin.init();

    }

    $.fn.syncPos = function(options) {

        return this.each(function() {
            if (undefined == $(this).data('syncPos')) {
                var plugin = new $.syncPos(this, options);
                $(this).data('syncPos', plugin);
            }
        });

    }

})(jQuery);

$content.syncPos();