JSFiddle - React, Tailwind, and code Playground

by luchaninov

HTML

<script src="https://raw.github.com/YuriyLuchaninov/tagjs/master/tag.js"></script>
<expandable header="Click">
    <ul>
        <li id='alert'>lkj;lksdf</li>
        <li>lkj;lksdf</li>
        <li>lkj;lksdf</li>
        <li>lkj;lksdf</li>
        <li>lkj;lksdf</li>
    </ul>
</expandable>

CSS

.content {
    background-color: #abc;
    height: 0;
    overflow: hidden;
    
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.inner{
    padding: 5px;
}

JavaScript

var component = {
    name:'expandable',
    template: '<div><div class="header"></div><div class="content"><div class="inner"><content></content></div></div></div>',
            script: function(element, attrs) {
                var $header = $(element).find('.header');

                $header.html(attrs.header);
                $header.on('click', function(e){
                    var $element = $(element);
                        height = $element.find('.inner').outerHeight(true);
                        $container = $element.find('.content');
                    
                    $container.toggleClass('show');
                    if($container.hasClass('show')){
                        $container.height(height);
                    } else {
                        $container.height(0);
                    }
                });
            }
        };

$('#alert').on('click', function(e){ alert(e.currentTarget.innerHTML);});

TagBuilder.register(component);
TagBuilder.apply(document.body);